2

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

5 回答 5

2

怎么样

onclick='deleteRow(this)'

并且有

function deleteRow(img) {
  var thisRow = img.parentNode.parentNode.parentNode; // div..td..tr
  thisRow.parentNode.removeChild(thisRow);
}
于 2012-08-01T05:51:28.960 回答
1

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/

于 2012-08-01T06:01:41.683 回答
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/

于 2012-08-01T06:06:50.607 回答
0

可能的解决方案，使用按钮而不是图像，并为 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>
于 2012-08-01T05:57:55.410 回答
0

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

<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);
}

The above allows the image to be anywhere in the cell, it goes up to the first TR ancestor and deletes it. If there isn't one, it does nothing. Using a hard coded string of parent nodes will throw an error if the structure changes.

于 2012-08-01T06:26:30.623 回答