Question

<tr>
    <td colspan="2">
        <div>
            <table id="dataTable">
                <tbody>
                    <tr></tr>
                    <tr id="row_1"></tr>
                    <tr id="row_2"></tr>
                    <tr id="row_3"></tr>
                </tbody>
            </table>
        </div>
    </td>

</tr>

如何使用jQuery获取tr中的id值？我试过.attr但失败了。

var row = jQuery('<tr>').attr("id", "row_" + item.autoID);
row.append(jQuery('<td>').append(jQuery('<input>').attr('type', 'checkbox', 'javascript:deleteChecked(' + item.autoID + ');').attr('id', 'check_id_')));


 <input type="button" value="Delete" id="delete_check" disabled onclick="deleteChecked()"/>

我正在尝试获取tr属性'row_'+ id。我有一个复选框。如果选中该复选框，则单击“删除”。它应该删除具有特定id或所有已检查行的行。

到目前为止，我有：

jQuery(document).on('click', '#check_id_', function(id){
jQuery('#delete_check').attr("disabled",!jQuery('#check_id_').is(":checked"));
//var row = jQuery(this).closest('tbody').find('tr').attr('id');
// console.log(row); //doesn't work

});  

function deleteChecked(id){
//grab the checked row ids

}

任何帮助表示感谢。

Answer 1

要使用已选中的复选框迭代行并获取其ID，这样的事情应该可以解决问题：

$('#dataTable')
    .find('input[type="checkbox"]:checked')
    .closest('tr')
    .each(function(ind, ele){
        var id = $(ele).attr('id');
        //do something with the id here
    });

请参阅this demo fiddle

HTH， -Ted

Answer 2

如果我理解你的要求，我会建议以稍微不同的方式处理这个问题。

您的简单无法在HTML中包含重复的ID。 ID查找使用快速查找字典，每个id值只能存储一个元素，因此只找到第一个。
避免在jQuery中不惜一切代价使用内联事件处理程序（如onclick=""）。它将处理程序注册与处理程序响应分开，没有任何好处，也不允许jQuery提供的一些额外的酷事件功能（例如多个处理程序）。
使用委派事件处理程序进行删除操作。这简化了HTML，并以更简单的方式允许动态元素/行。
您的问题的读取方式，使用复选框而不是删除按钮似乎很奇怪。除非你有充分的理由不使用按钮，否则请使用按钮。
除非这些ID用于其他目的，否则这些行不需要ID。只需将行closest删除到单击的删除按钮即可。
使用$('<htmltag>', {'prop': 'value', 'prop2', 'value2'})语法创建具有属性的新元素。它更短更容易阅读。

所以，把所有这些放在一起，你得到以下内容来创建一个新行：

var row = $('<tr>', {
    "id": "row_" + item.autoID,
    text: "NEW ROW"
});
row.append($('<td>').append($('<input>', {
    'type': 'button',
    'value': 'X',
    'class': 'deleteme'
})));

$('#dataTable').append(row);

这个简单的代码用于删除包含deleteme＆＃39; X＆＃39;的行。按下按钮：

$('#dataTable').on('click', '.deleteme', function(){
      $(this).closest('tr').remove();
});

这是委派的事件处理程序。它委托负责监听click事件到不变的祖先元素。当点击事件冒泡到该元素时，然后应用jQuery选择器（在本例中为类deleteme），然后针对导致的任何匹配元素运行回调函数首先发生的事件。结果是deleteme按钮只需要在活动时存在才能使用。

清洁简单。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/k5rh82cz/

现在，如果您的实际目标不同，您需要解释您希望它如何显示：）

使用Javascript获取自定义属性的值

2 个答案: