Question

我创建了一个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);
 }

Answer 1

怎么样

onclick='deleteRow(this)'

并且

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

Answer 2

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/

Answer 3

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/

Answer 4

可能的解决方案，使用按钮代替图像，并保留对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>

Answer 5

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

<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祖先并删除它。如果没有，它什么都不做。如果结构发生变化，使用硬编码的父节点字符串将引发错误。

在innerHTML中调用javascript函数

5 个答案: