动态构建的Jquery表将行数据分配给变量

时间:2016-10-26 14:30:36

标签: javascript jquery

我在我的视图中动态构建了一个表,我使用jquery弹出模式对话框中的值填充了一个表。我想要完成的是获取行中的每个单元格并将其分配给变量,此时我将通过ajax调用将数据发布到数据库

我对JS和jnquery相当新,并且遵循了很多例子,我似乎无法想象将单元格值赋给变量,我已经包含了下面的代码。

这是表格的html

<div class="row">
<div class="col-md-12">
    <table id="myTest" class="table table-responsive">
        <thead>
        <tr>
            <th>Sku Number</th>
            <th>Product Name</th>
            <th style="width:300px">Description</th>
            <th>Quantity</th>
            <th>Border</th>
            <th>Ink Color</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        </tbody>                
    </table>

    <div style="padding:10px 0; text-align: right; ">
        <input id="submit" type="button" value="Save Order" class="btn btn-warning" style="padding: 10px 20px; margin-right: 15px;" />
    </div>
</div>

这是用于填充表格的JS

function addItem() {
    var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
    var td = $("<td></td>");
    td.append(remove);
    var valid = true;

    allFields.removeClass("ui-state-error");

    if (valid) {
        $("#myTest tbody").append(
          "<tr>" +
          "<td>" + skuNumber.val() + "</td>" +
          "<td>" + productName.val() + "</td>" +
          "<td>" + description.val() + "</td>" +
          "<td>" + quantity.val() + "</td>" +
          "<td>" + border.val() + "</td>" +
          "<td>" + inkColor.val() + "</td>" +
          "</tr>");
          dialog.dialog("close");     
          $("#myTest > tbody tr:last").append(td);
          //console.log(td);
    }
    return valid;
}

当你点击提交按钮时,我想创建一个包含表格中每一行的对象列表,这就是我遇到问题的地方。

$("#submit").click(function () {
    var isAllValid = true;
    var list = [];

    $("#myTest tbody tr td")
        .each(function(index, ele) {
            var orderItem = {
                SkuNumber: skuNumber.val(),
                ProductName: productName.val(),
                Description: description.val(),
                Quantity: quantity.val(),
                Border: border.val(),
                InkColor: inkColor.val()
        };
        list.push(orderItem);
        console.log(orderItem);
    });

0 个答案:

没有答案