在innerHTML中调用javascript函数

Question

I created an addRow function which allows me to add row to a table. After i Add the row, I wanted to create an option to delete the new row. Is there a way to recycle my function?

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

how about

onclick='deleteRow(this)'

and have

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

Answer 2

mplungjan technically answered before me, but I was already making an example so here you go:

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

Live example: http://jsfiddle.net/HPww7/1/

Answer 3

jQuery allows for a much cleaner, more elegant and more cross browser compatible solution:

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

Here's a live example: http://jsfiddle.net/HPww7/2/

Answer 4

Possible solution,using a button instead of the image, and keeping a reference to the table for the deleteRow function:

<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

In the image you can do:

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

Then:

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.