当复选框被更改并且选择框被更新时,如何获得更新行的所有值?

时间:2017-05-01 09:15:05

标签: javascript jquery

我正在尝试保存当前更新的行。我的行包含选择框和复选框。如果我更改选择框,则更新选中的值和复选框状态。

function assignValue(itemsAll, itemLinked) {
    var flage = true;
    $.each(itemsAll, function (key, d) {
        var tblRow = '<tr>';
        tblRow += '<input id="hdnID" type="hidden" value="' + d.ItemCode + '" />';
        tblRow += '<td style="width:20%"><a href="#" id="lnkImage" ><span class="fa fa-image"></span></a>&nbsp;&nbsp;' + d.ItemCode + '</td>';
        tblRow += '<td style="width:70%">' + d.ItemName + '</td>';
        //alert("data"+d.Itme1);

        if (itemPrice != null) {
            var option = null;
           for (var i = 0; i < itemPrice.d.length; i++) {
                option += '<option value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
            }
        } else {
            SessioExp(response.statusText);
        }

        tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown">' + option + '</select></div></td>';
        $.each(itemLinked, function (k, v) {
            if (d.ItemCode == v.ITEMCODE) {
                if (v.ISLINKED) {
                    tblRow += '<td style="width:10%" align="center"><a href="#"><span id="existingData" class="fa fa-times" aria-hidden="false" style="display: none;"></span></a></td>';
                    tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked" checked /></td>';
                    flage = false;
                }
            }
        });

        if (flage) {
            tblRow += '<td style="width:10%" align="center"><a href="#"><span id="latestData" class="fa fa-check"></span></a></td>';
            tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked"/></td>';
        } else {
            flage = true;
        }
        tblRow += '</tr>';
        $("#tblStockTranslist tbody").append(tblRow);
    });
}

上面的代码设置了表格的行,我的输出是 enter image description here

2 个答案:

答案 0 :(得分:0)

使用此代码

$("table").on("change","select",function()
{
   var changed_row = $(this).parents("tr:eq(0)"),
       selected_value = $(this).val();

});

答案 1 :(得分:0)

id更改为class,因为id在HTML中必须是唯一的(对于隐藏字段),

tblRow += '<input class="hdnID" type="hidden" value="' + d.ItemCode + '" />';

您可以尝试onchange事件,

$('#tblStockTranslist').on('change','select,:checkbox',function(){
   $tr = $(this).closest('tr');
   code=$tr.find('.hdnID').val();
   name=$tr.find('td:eq(1)').text();
   value = !$(this).is(':checkbox') ? this.value : '';
   // and so on...
   console.log({code:code,name:name,value:value}); // make object like this
});