Javascript function call from HTML Table Cells

Question

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

possible duplicate

VikingCode
– VikingCode

2017-04-26 07:39:36 +00:00
Commented Apr 26, 2017 at 7:39 — VikingCode
– VikingCode, Commented Apr 26, 2017 at 7:39

Rory McCrossan · Accepted Answer · 2017-04-26 07:38:53Z

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="foo"></table>

answered Apr 26, 2017 at 7:38

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

6 Comments

NIKHIL K A Over a year ago

How can I pass particular text field value

Rory McCrossan Over a year ago

Pass them where?

NIKHIL K A Over a year ago

I need to pass value to function

Rory McCrossan Over a year ago

Which function? Assuming you mean your myChangeFunction() then, as I mentioned, both my examples above still do that.

Rory McCrossan Over a year ago

No problem. Don't forget to accept an answer if it helped

|

Jhanvi Patel · Accepted Answer · 2019-10-04 13:31:14Z

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

Collectives™ on Stack Overflow

Javascript function call from HTML Table Cells

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related