jquery 从Javascript中获取动态添加的表行选定Id

hsgswve4  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(280)

在我的应用程序中,这里添加新的行与动态ID分配从循环。
在视图中,我创建了一个PurchaseOrder,并在这里将行添加到表中。
所以这里当Select的值改变时,我想得到改变后的行ID和JavaScript的Selected ID,并将其发送到控制器。
如何在JavaScript中实现这一点?

var counter = 1;

  $(function () {

        $("#add").click(function () {
            var newRow = $(
                '<tr id="tablerow' +
                counter +
                '"> ' +
                "<td>" +
                '<label id="CountItems"><strong>' +
                counter +
                "</strong></label>" +
                "</td>" +
                '<td width="40%">' +
                '<select class="form-select js-dropdown" name="Item_Id[' +
                counter +
                ']" id="ItemId"' + counter+ 'required="required" ' +
                "</select>" +
                "</td>" +
                '<td width="10%">' +
                '<input type="text" class="form-control" name="Qty[' +
                counter +
                ']" value="1" id="Qty"' + counter + ' required="required" />' +
                "</td>" +
                '<td width="10%">' +
                '<input type="text" class="form-control" name="AcidStables[' +
                counter +
                ']" value="" required="required" />' +
                "</td>" +
                '<td width="20%">' +
                '<input type="text" class="form-control" name="Unit_Price[' +
                counter +
                ']" value="0.00" id="UnitPrice"' + counter + '  required="required" />' +
                "</td>" +
                '<td width="20%">' +
                '<input type="text" class="form-control" name="Line_Total[' +
                counter +
                ']" value="0.00" id="LineTotal"' + counter + ' required="required" />' +
                "</td>" +
                "<td>" +
                '<button type="button" class="btn btn-danger" onclick="removeTr(' +
                counter +
                ');">x</button>' +
                "</td>" +
                "</tr>"
            );

            var selectElement = newRow.find("select"); // Find the <select> element in the new row

            // Populate the <select> element with options
            dropdownOptions.forEach(function (option) {

                var optionElement = $("<option>").val(option.Value).text(option.Text);

                selectElement.append(optionElement);
            });

            newRow.appendTo("#submissionTable");
            counter++;
            return false;
        });
3wabscal

3wabscal1#

我在一些地方修改了你的代码:
1-将行内容放在变量中以提高可读性
2-更正了填充每行<select>的方式。
而且很有效

// fake values for dropdown only for testing
var dropdownOptions = [{
    Text: "a",
    Value: "1"
  },
  {
    Text: "b",
    Value: "2"
  },
  {
    Text: "c",
    Value: "3"
  }
];

var counter = 1;

$(function() {

  $("#add").click(function() {
    // create a row, add content to it and append to table
    $('<tr id="tableRow' + counter +'">' + rowContent + "</tr>").appendTo("#submissionTable");

    counter++;
    return false;
  });
});

// content of each row
var rowContent = "<td>" +
  '<label id="CountItems"><strong>' +
  counter +
  "</strong></label>" +
  "</td>" +
  '<td width="40%">' +
  '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' +
  counter +
  ']" id="ItemId"' + counter + 'required="required"> ' + populate() +
  "</select>" +
  "</td>" +
  '<td width="10%">' +
  '<input type="text" class="form-control" name="Qty[' +
  counter +
  ']" value="1" id="Qty"' + counter + ' required="required" />' +
  "</td>" +
  '<td width="10%">' +
  '<input type="text" class="form-control" name="AcidStables[' +
  counter +
  ']" value="" required="required" />' +
  "</td>" +
  '<td width="20%">' +
  '<input type="text" class="form-control" name="Unit_Price[' +
  counter +
  ']" value="0.00" id="UnitPrice"' + counter + '  required="required" />' +
  "</td>" +
  '<td width="20%">' +
  '<input type="text" class="form-control" name="Line_Total[' +
  counter +
  ']" value="0.00" id="LineTotal"' + counter + ' required="required" />' +
  "</td>" +
  "<td>" +
  '<button type="button" class="btn btn-danger" onclick="removeTr(' +
  counter +
  ');">x</button>' +
  "</td>";

//Populate the <select> element with options
// this function is called inside the rowContent variable above 
function populate() {
  var options = "";
  dropdownOptions.forEach(function(option) {

    options += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;

  });
  return options;
}

// this function is set for onchange event of <select> inside the rowContent variable above
function sendInfo(e) {
  console.log(e.name, e.value);
  console.log(e.closest("tr").id);
  // todo: send data to wherever is needed
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add">Add</button>
<table id="submissionTable">

</table>

更新

对不起,我似乎忘记了原始答案中的行id。
那么,要获取row.id,您可以使用element.closest()函数。
我更新了我的代码片段如下:
1-给每一行一个id(就像你在问题中做的那样):
$('<tr id="tablerow' + counter +'">' + rowContent + "</tr>").appendTo("#submissionTable");
2-使用row.idclosest()sendInfo()函数中检索www.example.com:
console.log(e.closest("tr").id);

相关问题