Question

我有一个ID为$this->db->select("CONCAT(CAST(A.Kd_Urusan AS char(2)),'.',RIGHT(CONCAT('0',CAST(A.Kd_Bidang AS char(2))),2)) AS Kd_Bidang_Gab"); $this->db->select("CONCAT(CAST(A.Kd_Urusan AS char(2)),'.',CAST(A.Kd_Bidang AS char(2)) ,' - ', A.Nm_Bidang) AS Nm_Bidang_Gab");的表，该表可以动态增长或收缩。该表中的每一行如下所示：

line-creation-table

这些行是动态添加的。现在，当单击<tr> <td><input type="text" name="brand" /></td> <td><input type="text" name="itemRefNo" id="itemRefNo"/></td> <td> <input type="number" name="quantity" value="1"/></td> <td> <input type="text" name="unitPrice" /></td> <td><input type="date" name="deliveryDate" /></td> <td><input type="button" value="Show Previous Actions" id="showPreviousActions"/></td> </tr>按钮时，我想从单击按钮的行中的showPreviousActions单元中检索值。

我尝试过：

itemRefNo

这：

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var itemRefNo = $(this).parent().find('input[id="itemRefNo"]').val();
}

，但都不起作用。当我登录var itemRefNo = $(event.target).closest('input[id="itemRefNo"]').val();变量时，我得到itemRefNo。我该如何解决？非常感谢。

Answer 1

此代码：

$(this).parent()

获取当前项（此=按钮）并获取其父项，即按钮的td，因此尝试在相邻单元格中查找输入失败。

一种快速解决方法是让td的父母tr给出：

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var itemRefNo = $(this).parent().parent()
                        .find('input[id="itemRefNo"]').val();
}

更好的方法是使用closest()查找按钮的行：

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var row = $(this).closest("tr");
    var itemRefNo = row.find('input[id="itemRefNo"]').val();
}

closest()与递归调用.parent()相同，直到找到匹配的节点（即最接近的父节点）为止。

Answer 2

您可以使用

$('#showPreviousActions').click(function () {
            var aa = $(this).closest('tr').find('#itemRefNo').val();
        });

Answer 3

好的，我这边是一个非常愚蠢的错误。为该表动态创建一行时，我忘记在此处更改代码，因此在新创建的行中将有一个ID为itemRefNo的输入。旧代码：

$('#line-creation-table').append("<tr>" +
                "<td><input type='text' name='brand' /></td>" +
                "<td><input type='text' name='itemRefNo' /></td>" +
                "<td> <input type='number' name='quantity' value='1'/></td>" +
                "<td> <input type='text' name='unitPrice' /></td>" +
                "<td><input type='date' name='deliveryDate' /></td>" +
                "<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")

新代码：

$('#line-creation-table').append("<tr>" +
                "<td><input type='text' name='brand' /></td>" +
                "<td><input type='text' name='itemRefNo' id='itemRefNo'/></td>" +
                "<td> <input type='number' name='quantity' value='1'/></td>" +
                "<td> <input type='text' name='unitPrice' /></td>" +
                "<td><input type='date' name='deliveryDate' /></td>" +
                "<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")

@ freedomn-m的建议都起作用。

如何基于jQuery中的ID从动态添加的行中获取特定单元格

3 个答案: