在innerHTML中调用javascript函数

Calling javascript function within innerHTML

本文关键字：javascript 函数 调用 innerHTML      更新时间：2024-05-31

我创建了一个addRow函数，它允许我将行添加到表中。添加行之后，我想创建一个选项来删除新行。有办法回收我的函数吗？

function addRow() {
 var table = document.getElementById('dataTable');
 var rowCount = table.rows.length;
 var newRow= table.insertRow((1));
 var c0 = newRow.insertCell
 c0.innerHTML="<div ><img src='include/images/cross.png' alt='delete row' onclick='deleteRow(rowCount)'/></div>";
  }
function deleteRow(row){
 var elem = document.getElementById('tr'+row);
 var old = (elem.parentNode).removeChild(elem);
 }

怎么样

onclick='deleteRow(this)'

并具有

function deleteRow(img) {
  var thisRow = img.parentNode.parentNode.parentNode; // div..td..tr
  thisRow.parentNode.removeChild(thisRow);
}

mplungjan在我之前就已经回答了，但我已经在做一个例子了，所以现在开始：

function addRow() {
    var table = document.getElementById('dataTable');
    var rowCount = table.rows.length;
    var newRow= table.insertRow();
    var c0 = newRow.insertCell();
    c0.innerHTML="<div><img src='http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg' alt='delete row' onclick='imageClick(this)'/></div>";
}
// Function for deleting the parent row of a clicked image
window.imageClick = function(img) {
    img.parentNode.parentNode.removeChild(img.parentNode);
}

现场示例：http://jsfiddle.net/HPww7/1/

jQuery提供了一个更干净、更优雅、更跨浏览器兼容的解决方案：

function addRow() {
    var table = $('#dataTable');
    var newRow = $('<tr><td><div></div></td></tr>');
    // Create an image to place in the new row
    var image = $('<img>')
        .attr('src', 'http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg')
        .attr('alt', 'delete row')
        .on('click', function() {
            // Delete parent row on click
            $(this).parents('tr').remove();
        });
    // Append the image to the row and the row to the table
    image.appendTo(newRow);
    newRow.appendTo(table);
}

下面是一个活生生的例子：http://jsfiddle.net/HPww7/2/

可能的解决方案，使用按钮而不是图像，并为deleteRow函数保留对表的引用：

<table id='dataTable'></table>
<button onclick='addRow()'>add</button>
<script>
var table = document.getElementById('dataTable');
function addRow() {
 var rowCount = table.rows.length;
 var newRow= table.insertRow(0);
 var c0 = newRow.insertCell();
 var button = document.createElement("button");
 button.innerHTML = "delete";
 button.row = newRow;
 button.addEventListener("click", function(e) {
  deleteRow(this.row);
 })
  c0.appendChild( button );
}
function deleteRow(row){
  table.firstChild.removeChild(row);
}
</script>

在图像中，您可以执行以下操作：

<img onclick="deleteRow(this);" ...>

然后：

function deleteRow(el) {
  var node = el.parentNode;
  while (node && node.tagName.toLowerCase() != 'tr') {
    node = node.parentNode;
  }
  if (node) node.parentNode.removeChild(node);
}

上面允许图像位于细胞中的任何位置，它会上升到第一个TR祖先并删除它。如果没有，它什么也不做。如果结构发生变化，使用父节点的硬编码字符串将引发错误。

相关文章：