php - jQuery 根据表行传递输入值

Question

我对 jquery 知之甚少，所以如果我说的不太清楚，请原谅。

我有一个表，它的行是从 php db 查询填充的(行数会有所不同)，在这种情况下有两行数据。这是 php 生成的 html 表的一部分。

<table border=1 width=800px id=workout>
 <tr>
 <th width=300px id=clients>Client</th>
 <th width=200px id=movements>Movements</th>
 <th>X Completed</th>
 </tr>

<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="1"></td>   
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
              <option value="select">Select...</option>
              <option>Key Movement</option>
              <option>Movement -1</option>
              <option selected="selected" >Movement -2</option>
              <option>Movement -3</option>
              <option>Movement -4</option>
        </select>
</td>
<td><label id="count"></label></td>
</tr>

<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="8">
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
              <option value="select">Select...</option>
              <option>Key Movement</option>
              <option>Movement -1</option>
              <option selected="selected" >Movement -2</option>
              <option>Movement -3</option>
              <option>Movement -4</option>
        </select>
</td>
<td><label id="count"></label></td>
</tr>

我正在传递 movement 的值和 client_id到 POST jquery 这样我就可以对数据运行 php 查询并返回结果。如何根据选择菜单所在的行传递所选移动和 client_id 的值。

例如:如果用户更改第二行的移动下拉菜单，我想发送 client_id和 selected>Movement<到 jQuery 函数。现在它只是获取我表格的第一行，仅此而已。

这是我编辑的 jQuery:

编辑:

<script type="text/javascript">

var typeval,clientval, class_id;
$('.typeval').on('change', function(){
    movement =  $(".typeval option:selected").val();
    client_id = $(this).parents('tr').find('input.clientval').val();
    class_id = $(<? echo $class_id; ?>).val();

    //console.log($(this).parents('tr').find('input.clientval').val(), $(this).val());
    $.ajax(
    { url: "movement_count.php",
      type: "post",
      data: {typeval:typeval, client_id: clientval, class_id :},
      dataType: "json",
      });

    success: (function(output) {
    alert(output);
    $(".count").html(output);
    })
 });

</script>   

Answer 1

因为您使用的是 jQuery，所以我会这样做。删除内联 JavaScript 并绑定(bind)到选择元素的更改事件。

var typeval,clientval;
$('select.typeval').change(function() {
    //console.log($(this).parents('tr').find('input').val(), $(this).val());
    typeval =  $(this).val();
    clientval = $(this).parents('tr').find('input').val();
});​

• $(this).parents('tr').find('input').val();//会给你client_id
• $(this).val();//将为您提供所选项目的值

然后您可以将这些值放入您的 AJAX 调用中。

jsFiddle example