jQuery循环遍历表格的每一行和每个单元格，将值连接起来。

Question

jQuery循环遍历表格的每一行和每个单元格，将值连接起来。

4

我有一个表格，其中有几行。每一行都有一个产品字段、一个等级字段和一个家庭字段。

然后为每个可用尺寸提供了几个复选框。

表格中的一行看起来像这样:

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

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

为了让您了解背景，我的产品代码如下所示：3811460S5。38114是宽度和高度，60是长度，Cr是等级。

我想要的是，当我点击按钮时，jquery必须循环遍历所有表格单元格。如果复选框被勾选且产品已填写，则jquery必须将字段连接起来，如下所示：skufamily（对于行[skufamily]）+ 长度（来自单元格[size]）+ 等级（来自行[skugrade]）。

此结果必须填充当前的td输入线路。因此现在每个单元格都将有一个精确的sku（仅在勾选并填充产品时）。

skufamily、size和grade是预填的，所以只需要用jquery循环和连接这些字段。

这里有一个可以操作的示例：http://jsfiddle.net/QS56z/

我尝试过以下概念，但无法完全掌握代码。

    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

        });

这远远不正确，如果您能引导我走正路，我将不胜感激。

一如既往，非常感谢。

- JustStarting

3

你自己有尝试过吗？ - Henrik Andersson

谢谢Limelights，我已经更新了问题并提供了我的代码，但我认为我走错了方向...非常错误...抱歉，我是jquery和编码的新手。 - JustStarting

不需要为自己是初学者而道歉，只要确保在发布问题之前阅读我们的常见问题解答即可。常见问题解答：http://stackoverflow.com/faq - Henrik Andersson

谢谢Limelights，以后会更加遵守这个规定。 - JustStarting

酷毙了，大哥！ :) - Henrik Andersson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terence · Accepted Answer

更新了您的示例代码。我认为这段代码应该可以解决问题。

$("#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);
                });;
            });
        }
    });
});