Question

我只获取第一行中的id属性值，但想在其他动态创建的行中获取属性值。单击表格行输入标记应显示请帮我找到解决方案。

脚本：

<script>
$('document').ready(function () {
    $('#add').click(function () {
        var id = parseInt($('#main tbody tr:last').attr('id')) + 1;
        $('#main > tbody:last').append("<tr class=\"edit_tr\" id=\"" + id + "\" ><td>" + id + "</td><td><span id=\"parti_" + id + "\" class=\"text\" ></span><input type=\"text\" class=\"editbox\" id=\"parti_input_" + id + "\" /></td><td><span id=\"qty_" + id + "\" class=\"text\"></span><input type=\"text\" class=\"editbox\" id=\"qty_input_" + id + "\" /></td><td><span id=\"amountrs_" + id + "\" class=\"text\"></span><input type=\"text\" class=\"editbox\" id=\"amountrs_input_" + id + "\" /></td><td><span id=\"amountp_" + id + "\" class=\"text\"></span><input type=\"text\" class=\"editbox\" id=\"amountp_input_" + id + "\" /></td><td></td><td></td></tr>");
    });
    $('#del').click(function () {
        $('#main tbody tr:last').remove();
    });
    $(".edit_tr").click(function () {
        var ID = $(this).attr('id');
        $("#parti_" + ID).hide();
        $("#qty_" + ID).hide();
        $("#amountrs_" + ID).hide();
        $("#amountp_" + ID).hide();
        $("#parti_input_" + ID).show();
        $("#qty_input_" + ID).show();
        $("#amountrs_input_" + ID).show();
        $("#amountp_input_" + ID).show();
    }).change(function () {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />'); // Loading image
    });
    $(".editbox").mouseup(function () {
        return false
    });
    // Outside click action
    $(document).mouseup(function () {
        $(".editbox").hide();
        $(".text").show();
    });
});
</script>

HTML CODE：

<tbody>
    <tr class="edit_tr" id="1">
        <td>1</td>
        <td><span id="parti_1" class="text"></span>
            <input type="text" class="editbox part" id="parti_input_1" />
        </td>
        <td><span id="qty_1" class="text"></span>
            <input type="text" class="editbox" id="qty_input_1" />
        </td>
        <td><span id="amountrs_1" class="text"></span>
            <input type="text" class="editbox" id="amountrs_input_1" />
        </td>
        <td><span id="amountp_1" class="text" /></span>
            <input type="text" class="editbox" id="amountp_input_1" />
        </td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Answer 1

我在你的标记中没有看到#main或<table>，所以我自己添加了。

如果您想定位tbody #main > tbody，那么＃main必须位于<table>标记内。我刚刚在我的例子中删除了它。这是你在找什么？

点击这里

的 Demo

我还更正了ready函数中的额外'，应为$(document)。还添加了一个仅用于演示的按钮。

Answer 2

您需要使用事件委派将事件侦听器附加到动态创建的元素。根据您使用的jQuery版本，您将使用.on，.delegate或.live。

$("body")
    .on('click', ".edit_tr", function () {
        ...
    })
    .on('change', ".edit_tr", function () {
        ...
    });

没有在此代码中获取id属性值

2 个答案:

的 Demo