jquery循环遍历表行和单元格,当选中复选框时,连接

时间:2013-04-23 13:58:11

标签: jquery

我有一个包含多行的表格。表格中有几列带复选框。我需要遍历每个复选框,在其中检查连接/连接来自该特定单元格的输入到同一行的其他输入。

你可以在这里看到一个小提琴: http://jsfiddle.net/QS56z/10/

除了循环遍历行之外,如果我有<td>,我怎么能循环遍历每个<td>如何查找名称以x开头的输入TD。一旦找到连接/将其输入连接到行中的输入。

我希望这是有道理的。

主要为: 我想加入(家庭)到(大小)到(等级)家庭和等级在同一行,并且每行有几种尺寸。每个结果必须写入当前正在处理的TD。

我已经达到了这一点但却被卡住了:

function createcodes(){
    alert('running');
    //run through each row
    $('.authors-list tr').each(function(){
         //processing this row
            //how to process each cell(table td) where there is checkbox
        $($(this).find('input[name^="line"]').val(

            $('$(this).find('input[name^="family"]'').val() + ' ' + // common input(family) on row, use for all table cells(td)
            $('#$(this).find('input[name^="size"]'').val() + ', ' + // this cells input called size, unique to this cell only
            $('#$(this).find('input[name^="grade"]'').val() // common input(grade) on row, use for all table cells(td)
          );
          // end of cell row processing
      });
        //end of rows processing
}

一如既往地谢谢。

http://jsfiddle.net/QS56z/10/

我的HTML是:

<table class="authors-list" border=1 id="ordertable">
 <tr>
     <td ><input type="text" id="product1" name="product1" class="rounded" value="38114CR"></td>
     <td ><input type="text" size='5' id="qty1" name="qty1" class="rounded" value="10"/></td> 
     <td class="tdcheckbox">
      <input type="checkbox"  id="h09_1" name="h09_1" checked class="rounded"/>
      <input type="text"  id="line_1_09" name="line_1_09" >
      <input type="text"  id="size_1_09" name="size_1_09" value="09">

    </td> 
     <td class="tdcheckbox">
      <input type="checkbox"  id="h12_1" name="h12_1" class="rounded"/>
      <input type="text"  id="line_1_12" name="line_1_12" value="">
      <input type="text"  id="size_1_12" name="size_1_12" value="12">
    </td> 
     <td class="tdcheckbox">
      <input type="checkbox"  id="h15_1" name="h15_1" checked class="rounded"/>
      <input type="text"  id="line_1_15" name="line_1_15" >
      <input type="text"  id="size_1_15" name="size_1_15" value="15">
    </td> 
    <td><input type="text" name="cubespercheck_1" id="cubespercheck_1" value="0" size=5></td>
    <td><input type="text" name="skufamily_1" id="skufamily_1" value="38114"></td>
    <td><input type="text" name="skugrade_1" id="skugrade_1" value="cr"></td>
 </tr>
</table>
<input type="button" id="continue" value="continue">

请记住,有多行。感谢。

2 个答案:

答案 0 :(得分:39)

更新

我已更新您的演示版:http://jsfiddle.net/terryyounghk/QS56z/18/

另外,我已将两个^=更改为*=。见http://api.jquery.com/category/selectors/

并注意:checked选择器。见http://api.jquery.com/checked-selector/

function createcodes() {

    //run through each row
    $('.authors-list tr').each(function (i, row) {

        // reference all the stuff you need first
        var $row = $(row),
            $family = $row.find('input[name*="family"]'),
            $grade = $row.find('input[name*="grade"]'),
            $checkedBoxes = $row.find('input:checked');

        $checkedBoxes.each(function (i, checkbox) {
            // assuming you layout the elements this way, 
            // we'll take advantage of .next()
            var $checkbox = $(checkbox),
                $line = $checkbox.next(),
                $size = $line.next();

            $line.val(
                $family.val() + ' ' + $size.val() + ', ' + $grade.val()
            );

        });

    });
}

答案 1 :(得分:7)

试试这个:

function createcodes() {

    $('.authors-list tr').each(function () {
        //processing this row
        //how to process each cell(table td) where there is checkbox
        $(this).find('td input:checked').each(function () {

             // it is checked, your code here...
        });
    });
}