jquery循环遍历表，每行和td的concatonate值 [英] jquery to loop through table, for each row and td concatonate values

问题描述

我有一个有几行的表。每行都有一个产品字段，一个成绩字段和一个系列字段。

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.

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

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.

我想要发生的是当我点击按钮时，jquery必须遍历所有表格单元格。如果有一个CHECKED复选框并且产品已经填充，则jquery必须加入以下字段：
skufamily（对于行[skufamily]）+ length（来自cell [size]）+ grade（来自row [skugrade]）

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])

此结果必须填充当前的td输入行。所以现在每个单元格都有一个精确的sku（仅在检查和产品填充时）

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

skufamily，size和grade是预先填充的，所以只需要jquery循环并加入字段。

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

这里有一个小提琴。 http://jsfiddle.net/QS56z/

here is a fiddle to play on. 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.

一如既往地感谢百万。

推荐答案

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

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);
                });;
            });
        }
    });
});

这篇关于jquery循环遍历表，每行和td的concatonate值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！