0

我正处于学习 js 和 jquery 的早期阶段。我陷入了一个我不明白的问题。我有一个 HTML 表单，我在其中收集用户输入。单击提交按钮时，用户输入将作为新行保存到表中（我们称之为“myTable”）。我完成了那部分。但是现在我想在单击 myTable 中的一行时获取行数据。我也有点。单击该行时，我确实得到了数据，除非我单击该行，否则我会在警报中多次获得相同的数据。第一次单击该行时，我会收到一个警报，第二次是两个……以此类推。请指出我的错误。这是我的html：

<div>label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value = "Submit" onclick ="addRow()" >
</div>

<table id="myTable" border=1 onclick="load_row()">
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>

这是我的 javascript：此函数将用户输入作为新行添加到表中：

var addRow = function(){
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;


$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );   
};

此功能会提醒我单击的行的详细信息。这就是我想我做错了什么的地方：

var load_row = function(){
var rows = $("#myTable tr");

rows.click(function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});

};
4

4 回答 4

1

这称为冒泡，只要单击 TR，您还会触发您绑定的 TABLE 的事件单击。因此，您不仅调用了 addRow，还调用了 load_row，它再次绑定了每个 TR 上的 .click 事件。

删除 table 元素上的 onclick 并在“head”标签中的某处添加“script”标签，例如

$(document).ready(function() { load_row() });

或在两者之间添加/更改

row.click => rows.unbind('click').click
于 2012-09-08T22:00:21.293 回答
1

每次调用时都会发生这种情况，因为load_raw您将 +1 点击事件绑定到每一行。所以最好使用 jqueryon绑定并click从 load_row 函数中删除绑定。

$('#myTable').on('click', 'tr', load_row())
于 2012-09-08T22:03:08.113 回答
0

每次用户点击时，您似乎都在为每一行添加一个新的点击事件。因此，只需在添加新事件之前取消绑定 click 事件。

rows.unbind("click").click(function() {
  var data = new Array();
  var cells = $(this).find("td");
  cells.each(function(i, cell) {
    data.push($(cell).text());
  });
  alert(data);
});
于 2012-09-08T22:03:51.043 回答
0

我清理了您的代码以删除内联 JavaScript 调用，使用了更多 jQuery ( $("#firstname").val();vs document.getElementById("firstname").value) 并使用该.on()函数正确绑定添加到表中的新行。

jsFiddle 示例。

jQuery

$('input[value="Submit"]').click(function() {
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").val();
    $("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>");
});
$("#myTable").on('click', 'tr', function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});​

HTML

<div><label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value="Submit" >
</div>

<table id="myTable" border=1>
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>​
于 2012-09-08T22:11:42.530 回答