jQuery遍历表行和单元格(在其中选中checkob的情况下)(jquery to loop through table rows and cells, where checkob is checked, concatenate)

69 IT屋

I have a table with multiple rows. there are several columns in the table with checkboxes. I need to loop through each of the checkboxes, where it is checked concatenate/join the input from that particular cell to other inputs from the same row.

you can see a fiddle here: http://jsfiddle.net/QS56z/10/

How can I, in addition to looping through the row, loop through each <td> once I have this <td> how can I look for an input whose name starts with x in that td. once found concatenate / join the input from that to the inputs in the row.

I hope that makes sense.

essentially: I want to join the (family) to the (size) to the (grade) where family and grade are on the same row, and there are several sizes on each row. each result must be written to the TD currently being processed.

I have got up to this point but have got stuck:

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
}

Thanks as always.

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

my html is:

<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">

keep in mind there are multiple rows. Thanks.

解决方案

UPDATED

I've updated your demo: http://jsfiddle.net/terryyounghk/QS56z/18/

Also, I've changed two ^= to *=. See http://api.jquery.com/category/selectors/

And note the :checked selector. See 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()
            );

        });

    });
}

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



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



除了循环遍历该行之外,如何在我拥有这个<后遍历每个< td> ; td> 如何在该td中查找名称以 x 开头的输入。



我希望这是有道理的。



< p>基本上:
我想将(家庭)与(大小)加入(年级),其中家庭和年级在同一行,每行有多个大小。每个结果都必须写入当前正在处理的TD。



我已经到了这一步,但是被卡住了:



 函数createcodes(){
alert('running');
//遍历每一行
$('。authors-list tr')。each(function(){
//处理这一行
//如何处理每一行单元格(表td)所在的复选框
$($(this).find('input [name ^ = line]')。val(

$('$( this).find('input [name ^ = family]'')。val()+''// //行上的通用输入(family),用于所有表单元格(td)
$( '#$(this).find('input [name ^ = size]'')。val()+','+ //此单元格输入称为size,仅此单元格唯一
$( '#$(this).find('input [name ^ = grade]'')。val()//行上的通用输入(grade),用于所有表单元格(td)
);
//单元格行处理的结束
});
//处理单元格的行结束
}


一如既往的感谢。



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



我的html是:



 < table class = authors-list border = 1 id = ordertable> 
< tr>
< td><输入类型= text id = product1 name = product1 class =取整 value = 38114CR>< / td>
< td><输入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已选中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已选中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><输入type = text name = cubespercheck_1 id = cubespercheck_1 value = 0 size = 5>< / td>
< td><输入类型= text name = skufamily_1 id = skufamily_1 value = 38114< / td>
< td><输入类型= text name = skugrade_1 id = skugrade_1 value = cr>< / td>
< / tr>
< / table>
<输入类型=按钮 id =继续 value =继续>


请记住有多行。谢谢。


解决方案

更新



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



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

b
$ b

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

b
$ b
  function createcodes(){

//遍历每一行
$('。authors-list tr ').each(function(i,row){

//首先引用所有需要的东西
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){
//假设您以这种方式布置元素,
/ /我们将利用.next()
var $ checkbox = $(checkbox),
$ line = $ checkbox.next(),
$ size = $ line.next( );

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

});

});
}

本文地址:IT屋 » jQuery遍历表行和单元格(在其中选中checkob的情况下)