Calling javascript function within innerHTML

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

Just wanted to mention that when you are using onclick='deleteRow' attribute, deleteRow() must be a global function which is not really a best practice. Have you considered event binding? — Evgeny
– Evgeny, Commented Aug 1, 2012 at 6:49

mplungjan · Accepted Answer · 2012-08-01 06:23:52Z

2

how about

onclick='deleteRow(this)'

and have

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

edited Aug 1, 2012 at 6:23

answered Aug 1, 2012 at 5:51

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Over a year ago

Missing one more parentNode? thisRow would still point to a TD.

Hubro · Accepted Answer · 2012-08-01 06:01:41Z

1

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/

answered Aug 1, 2012 at 6:01

Hubro

60k74 gold badges241 silver badges404 bronze badges

Comments

Hubro · Accepted Answer · 2012-08-01 06:06:50Z

1

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/

answered Aug 1, 2012 at 6:06

Hubro

60k74 gold badges241 silver badges404 bronze badges

3 Comments

RobG Over a year ago

Can you point out any cross browser issues in the OP? How is the jQuery version "cleaner"? Or all those chained methods "more elegant"? It's not even less code. Beauty is in the eye of the beholder I think.

Hubro Over a year ago

@RobG: It's more elegant because it contains less inline HTML code, it actually selects the closest parent row instead of the grand-parent element which makes it more future-proof, it's more cross-browser compatible because working with tables in plain javascript is a cross-browser mine field in the best of circumstances, and in my honest opinion the code flow is much simpler and way more readable.

RobG Over a year ago

If working with tables is such a minefield you should be able to point out a cross browser issue in either the OP or my answer. You are right about selecting the parent TR rather than a chain of parentNode properties, but that isn't hard to do without jQuery (see my answer). All chaining function calls is an issue for those maintaining and debugging the code.

sq2 · Accepted Answer · 2012-08-01 05:57:55Z

0

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>

answered Aug 1, 2012 at 5:57

sq2

5954 silver badges11 bronze badges

Comments

RobG · Accepted Answer · 2012-08-01 06:32:20Z

0

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.

edited Aug 1, 2012 at 6:32

answered Aug 1, 2012 at 6:26

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Calling javascript function within innerHTML

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related