I have created one dynamic HTML table.We can add and delete rows for that table. I have tried to call one javascript function from cells but that call is not happening.How can i call method from my addrow method

addRow() function code given below

    function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell0 = row.insertCell(0);
            var element0 = document.createElement("input");
            element0.type = "checkbox";
            element0.name="chkbox[]";
            cell0.appendChild(element0);

            var cell1 = row.insertCell(1);
            cell1.innerHTML = rowCount + 1;

            var cell2 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            element2.onchange = "myChangeFunction(this)"; // calling Javascript function
            cell2.appendChild(element2);

}

looking forward for suggestions

I have created one dynamic HTML table.We can add and delete rows for that table. I have tried to call one javascript function from cells but that call is not happening.How can i call method from my addrow method

addRow() function code given below

    function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell0 = row.insertCell(0);
            var element0 = document.createElement("input");
            element0.type = "checkbox";
            element0.name="chkbox[]";
            cell0.appendChild(element0);

            var cell1 = row.insertCell(1);
            cell1.innerHTML = rowCount + 1;

            var cell2 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            element2.onchange = "myChangeFunction(this)"; // calling Javascript function
            cell2.appendChild(element2);

}

looking forward for suggestions

• javascript
• jquery
• html-table
• dynamic-tables

• possible duplicate – VikingCode Commented Apr 26, 2017 at 7:39

2 Answers 2

To achieve this attach the event using the addEventListener() method, like this:

element2.addEventListener('change', myChangeFunction);

Then in your myChangeFunction(), the this keyword will refer to the element that raised the event. Try this:

function addRow(tableID) {
  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell0 = row.insertCell(0);
  var element0 = document.createElement("input");
  element0.type = "checkbox";
  element0.name = "chkbox[]";
  cell0.appendChild(element0);

  var cell1 = row.insertCell(1);
  cell1.innerHTML = rowCount + 1;

  var cell2 = row.insertCell(2);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "txtbox[]";
  element2.addEventListener('change', myChangeFunction);
  cell2.appendChild(element2);
}

function myChangeFunction() {
  console.dir(this);
}

addRow('foo');

<table id="foo"></table>

Also note that, as you've tagged the question with jQuery, you can massively simplify this code:

function addRow(tableID) {
  var $table = $('#' + tableID);
  var $tr = $('<tr><td><input type="checkbox" name="chkbox[]" /></td><td>' + ($table.find('tr').length + 1) + ' <input type="text" name="txtbox[]" class="txtbox" /></tr>').appendTo($table);
}

$('table').on('change', '.txtbox', function() {
  console.dir(this);
});

addRow('foo');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="foo"></table>

HTML CODE

<tr>
    <td class=" ">{{ blog.blogID }}</td>
    <td id='{{ blog.blogID }}' class="  sorting_1">
    <script>viewimg(i= '{{ blog.blogID}}' ,j = '{{ blog.blogImg }}');</script>
    </td>
    <td class=" ">{{ blog.blogTitle }}</td>
    <td class=" ">{{ blog.blogDesc }}</td>
</tr>

JAVASCRIPT

javascript function for set image in td tag of html dynamically

function viewimg(i, j) {
         var myNode = document.getElementById(i);
         while (myNode.firstChild){
            myNode.removeChild(myNode.firstChild);
         }
        var imgt = document.createElement('img');
        imgt.setAttribute("width", "100");
        imgt.setAttribute("heigth", "100");
        imgt.src = j;
        document.getElementById(i).append(imgt);
            }