1

我仅在第一行中获取 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 代码：

<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>
4

2 回答 2

0

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

如果你想这样定位tbody，#main > tbody那么 #main必须在<table>标签内。我刚刚在我的示例中删除了它。这是你要找的吗？

在这里检查

演示

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

于 2013-08-10T21:16:08.290 回答
0

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

$("body")
    .on('click', ".edit_tr", function () {
        ...
    })
    .on('change', ".edit_tr", function () {
        ...
    });
于 2013-08-10T21:16:14.810 回答