如何在 javascript 加载页面后添加 table 的行？

Question

我的 html table 中有两个 "up" 按钮；上面一个来自定义，下面一个由 javascript 添加。请参阅下面的代码和 jsfiddle 演示：

Table:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td>aaaaa</td> 
        </tr>
        <tr>
            <td><input id='btnUp1' type='button' value='up' class='up'/></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Javascript:

window.onload = function () {
    var tbody = document.getElementById('tbody'),
        n, row, cell;
    for (n = 0; n < 3; n++) {
        row = tbody.insertRow();
        cell = row.insertCell();
        cell.innerHTML = Math.random();
    }
    row = tbody.insertRow(2);
    cell = row.insertCell();
    cell.innerHTML = "<input id='btnUp' type='button' value='up' onclick='NavigateUpDown(this);' />";
    $(".up").click(function () { console.log($(this));});
}

$(".up").click(function () { console.log('outsideload:' + $(this));});

function NavigateUpDown(object) {
         var count = $('table tr').length;    // count gridview rows length   
         var $row = $(this).parents('tr:first'); 
         console.log($row);
}

演示请看下面的jsfiddle： http://jsfiddle.net/Balkanlii/apdy34xg/6/

请打开浏览器的开发者工具，边测试边观察"console"标签。您会看到，当单击上面的 "up" 按钮时，它会 returns 通过 window.onload 中的 $(".up").click(function () { console.log($(this));}); 上下文。但是，当单击第三行中的另一个 "up" 按钮时不会触发它，因为它是在 window 加载之后由 javascript 添加的。

我添加了 NavigateUpDown(object) 自定义函数来接收它，但是 $row 的上下文来自 "undefined"。

使用另一行，如：$(".up").click(function () { console.log('outsideload:' + $(this));}); 没有帮助，因为它也没有被触发。

如何在页面加载后在 javascript 中获取 javascript 添加的行？我们有类似 window.afterload() 的东西吗？任何帮助将不胜感激。

Answer 1

您可以按照以下方式进行：

 $( document ).ready(function() {
    var tbody = document.getElementById('tbody'), n, row, cell;
    for (n = 0; n < 3; n++) {
        row = tbody.insertRow();
        cell = row.insertCell();
        cell.innerHTML = Math.random();
    }
    row = tbody.insertRow(2);
    cell = row.insertCell();
    cell.innerHTML = "<input id='btnUp' type='button' value='up'  />";

    $(".up").click(function () { console.log($(this));});

        var button = document.getElementById("btnUp");
        button.addEventListener("click", function(event){
            var count = $('table tr').length;    // count gridview rows length   
            row = $(this).parents('tr:first'); 
            console.log(row);
        });
  });

Answer 2

如果去掉input的onclick属性，直接绑定一个onclick这样

 cell.innerHTML = "<input id='btnUp' type='button' value='up' />";
$(".up").click(function () { console.log($(this));});
$("#btnUp").click(function () { console.log($(this));});

它应该有效

此外，如果您随后使用 "this" 调用导航函数，它应该传递按钮上下文，然后您可以使用传递的 "this" 值。

window.onload = function () {
var tbody = document.getElementById('tbody'),
    n, row, cell;
for (n = 0; n < 3; n++) {
    row = tbody.insertRow();
    cell = row.insertCell();
    cell.innerHTML = Math.random();
}
row = tbody.insertRow(2);
cell = row.insertCell();
cell.innerHTML = "<input id='btnUp' type='button' value='up' />";
$(".up").click(function () { console.log($(this));});
$("#btnUp").click(function () { NavigateUpDown(this) });
}

function NavigateUpDown(object) {
         var count = $('table tr').length;    // count gridview rows length   
         var $row = $(object).parents('tr:first'); 
         console.log($row);
}

Answer 3

替换以下代码行：

cell.innerHTML = "<input id='btnUp' type='button' value='up' onclick='NavigateUpDown(this);' />";
$(".up").click(function () { console.log($(this));});

用这个：

cell.innerHTML = "<input id='btnUp' type='button' value='up' class='up'/>";
$(document).on('click',".up",function () { console.log($(this));});

$(document).on 将在任何动态元素上触发事件。

在 http://jsfiddle.net/o6f705mu/2/

上尝试相同的方法

如何在 javascript 加载页面后添加 table 的行？

How can I get the row of a table added after pageload by javascript?

javascript

jquery

html

jquery-1.9