Javascript 来自 HTML Table 个单元格的函数调用

Question

我创建了一个动态 HTML table.We 可以为那个 table 添加和删除行。我试图从单元格中调用一个 javascript 函数，但该调用不是 happening.How 我可以从我的 addrow 方法中调用方法吗

addRow()函数代码如下

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

}

期待建议

Answer 1

要实现此目的，请使用 addEventListener() 方法附加事件，如下所示：

element2.addEventListener('change', myChangeFunction);

然后在您的 myChangeFunction() 中，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>

另请注意，当您用 jQuery 标记问题时，您可以大大简化此代码：

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>

Answer 2

HTML 代码

<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函数用于在html的td标签中动态设置图像

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

Javascript 来自 HTML Table 个单元格的函数调用

Javascript function call from HTML Table Cells

javascript

jquery

html-table

dynamic-tables