Question

我创建了一个动态HTML表。我们可以为该表添加和删除行。我试图从单元格调用一个javascript函数，但调用没有发生。如何从我的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关键字将引用引发事件的元素。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

用于在html的td标签中动态设置图像的javascript函数

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

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

2 个答案: