0

我正在尝试实现一个简单的 jquery 代码，一个将新行添加到表中的函数：

function add_row(){
$('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" value="Remove row" onclick="remove_row()"</td></tr>')}

以及删除该行的第二个函数：

function remove_row(){
$(this).parents('tr').remove()}

第一个函数工作得很好，但似乎在第二个函数中没有设置“this”选择器。

有任何想法吗？

4

3 回答 3

1

当您内联（即在 HTML 代码中）注册事件处理程序时，它不会设置this参数 - 它将被设置为全局 ( window) 对象。

一种选择是this作为参数传递给remove_row，但您最好使用 jQuery 创建一次性的单一委托事件处理程序：

$('#giants_table').on('click', 'button', remove_row);

然后，您可以在 HTML 代码中完全省略该onclick属性。由于这是一个“委托”处理程序，它会自动处理添加到表中的每一行，即使它们在事件注册时不存在。

使用 jQuery 注册事件而不是内联的主要优点是：

  1. 自动设置this
  2. 保证传递event对象（与早期的 MSIE 版本不同）
  3. 对象属性的规范化event以消除浏览器差异
于 2013-09-24T11:29:28.210 回答
1

您可以使用两种方式完成此操作

  1. 传入this函数调用。

    function add_row(){
    $('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" value="Remove row" onclick="remove_row(this)" /></td></tr>');
}

function remove_row(ele){
    $(ele).parents('tr').remove();
}

  2. 绑定点击，并使用$(this)

    function add_row(){
    $('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" class="removebtn" value="Remove row" onclick="remove_row(this)"/></td></tr>');
    $('#giants_table tr td .removebtn').unbind('click').bind('click', function() {
          $(this).parents('tr').remove();
    });
}

我当然更愿意选择第二种选择。

于 2013-09-24T11:28:28.390 回答
0

您可以委托click处理程序（可能是更好的解决方案），或者在创建行时简单地分配它。下面的示例（使用 DOM 元素创建，而不是 HTML 标记，因为这是一种更好的做法）。

// delegate the function once in your DOM.ready
$('#giants_table tr').on('click', 'input[type="button"][value="Remove Row"]', function (e) {
    $(this).parents('tr').remove(); // this will point to the input
});

// or assign it when you create the row
function add_row(){
    var input = $('<input />'), //create new DOM elements
        row = $('<tr />'),
        cell = $('<td />'),
        rowCount = $('#giants_table tr').length;
    $('#giants_table tr:last').before(tr.append(td.append(input.clone().attr({
        "id": "giants_" + rowCount,
        "name": "giants_" + rowCount,
        "type": "text"
    })).append(input.clone().attr({
        "id": "removeRow" + rowCount,
        "type": "button",
        "value": "Remove Row"
    }).click(function (e) {
        $(this).parents('tr').remove(); // this now points to the input
    }))));
}
于 2013-09-24T11:35:33.347 回答