jQuery根据表行传递输入值

时间:2012-09-07 16:55:56

标签: php javascript jquery ajax

我知道很少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>

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

例如:如果用户在第2行更改了移动下拉菜单,我想将client_idselected>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>   

5 个答案:

答案 0 :(得分:2)

因为你正在使用jQuery,所以我会这样做。删除内联JavaScript并绑定到select元素的change事件。

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

答案 1 :(得分:0)

使用php为select和input元素提供唯一的id。类似的东西:

<input type="hidden" id="client_id$client_id" ...

<select name="movement[]" id="mov$client_id" ...

然后在你的javascript函数中使用php来包含client_id,如下所示:

changeMovement(client_id)

然后您可以使用client_id更改对应的任何移动:

var client = $("#client_id"+client_id).val();
var movement = $("#mov"+client_id).val();

对于唯一ID,您可能希望使用填充每行隐藏输入的值字段的任何变量。我说不知道这些数字究竟来自哪里。

答案 2 :(得分:0)

使用James的解决方案看起来像这样:

       

然后jquery看起来像这样:

var movement = this.value    var client_id = this.parent()。find(“。clientval”)

答案 3 :(得分:0)

检查此工作示例.. http://jsfiddle.net/sushanth009/BZ5Wt/

您可以使用此行获取所选行的ClientId ..

var client = $(this).parent().parent().find('.clientval').val();

答案 4 :(得分:0)

嗯,您需要执行以下操作:

1。删除所有onchange='changeMovement()',您将不再需要它们。

2。只需echo来自PHP的class_id

3。修复获得client_id的方式,如下所示。

<强>代码:

$(document).ready(function() {

    $('.typeval').change(function() {
        var movement = $(this).val();
        var client_id = $(this).parent().siblings().find('.clientval').val();
        var class_id = <?php echo $class_id; ?>;

        /* Do your AJAX call here */
    });

});​​​​​​​​​​​​