jquery 循环遍历表，对于每一行和 td 连接值

jquery to loop through table, for each row and td concatonate values

提问by JustStarting

I have a table with several rows. each row has a product field, a grade field and a family field.

我有一个有几行的表。每行都有一个产品字段、一个等级字段和一个系列字段。

There is then several checkboxes for each available size.

每个可用尺寸都有几个复选框。

a row in the table looks like this:

表中的一行如下所示：

<table class="authors-list" border=0 id="ordertable">
 <tr>
     <td style="font-size:10px;"><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/delete2.png" /></a></td>
     <td ><input type="text" id="product1" name="product1" class="rounded"/></td>
     <td ><input type="text" size='5' id="qty1" name="qty1" class="rounded"/></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" value="">
      <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" value="">
      <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"></td>
    <td><input type="text" name="skugrade_1" id="skugrade_1"></td>
 </tr>
</table>
<input type="button" id="continue" value="continue">

all fields will be hidden in end result besides the product field.

除了产品字段之外，所有字段都将隐藏在最终结果中。

To give you a background, my product code looks like this: 3811460S5 38114 is the width and height 60 is the length Cr is the grade.

给你一个背景，我的产品代码是这样的： 3811460S5 38114 是宽度和高度 60 是长度 Cr 是等级。

What I want to happen is that when I click the button, jquery must loop through all tables cells. where there is a CHECKED checkbox AND product has been populated, jquery must join the fields as below: skufamily(for row[skufamily])+length(from cell[size])+grade(from row[skugrade])

我想要发生的是，当我单击按钮时，jquery 必须循环遍历所有表格单元格。如果有选中的复选框并且产品已填充，jquery 必须加入如下字段：skufamily(for row[skufamily])+length(from cell[size])+grade(from row[skugrade])

this result must populate the current td input line. so now each cell will have an exact sku (only if checked and product populated)

此结果必须填充当前的 td 输入line。所以现在每个单元格都有精确的SKU（仅当被选中和填充的产品）

skufamily,size, and grade is prepopulated so just need the jquery to loop and join the fields.

skufamily、size 和 grade 已预先填充，因此只需要 jquery 循环并加入字段。

here is a fiddle to play on. http://jsfiddle.net/QS56z/

这是一个可以演奏的小提琴。http://jsfiddle.net/QS56z/

I have tried the following concept but cant quite nail the code.

我已经尝试了以下概念，但不能完全确定代码。

    function createcodes() {
$("table.authors-list").find('input[type="checkbox"][name^="h"]:checked').each(function () {
 if (<checkbox is checked>)
      document.getElementById(input[type="skufamily").value + 
      document.getElementById(input[type="size").value +
      document.getElementById(input[type="skugrade").value

        });

This is far from correct so if you can put me on the right path I'd appreciate it.

这远非正确，因此如果您能让我走上正确的道路，我将不胜感激。

Thanks a million as always.

一如既往地感谢一百万。

采纳答案by Terence

Updated your fiddle. I think this code should do it.

更新了你的小提琴。我认为这段代码应该这样做。

$("#continue").click(function(){
    $("table#ordertable > tbody > tr").each(function(){
        var productVal = $('td:eq(0) input', this).val();
        if(productVal.length > 0){
            //get the code portion
            var trimmedProductVal = productVal.substring(0, productVal.length - 2);
            var productCode = productVal.substring(productVal.length-2, productVal.length);
            //get the checked items
            $('td.tdcheckbox', this).each(function(){
                var currentCell = this;
                $("input[type='checkbox']:checked", this).each(function(){
                    //concatenate the value
                    var valueToSet = $('input[type="text"]:eq(1)', currentCell).val();
                    valueToSet = trimmedProductVal + valueToSet + productCode;
                    //set the text value
                    $('input[type="text"]:eq(0)', currentCell).val(valueToSet);
                });;
            });
        }
    });
});