如何在此代码中添加 onClick 函数

Question

我正在尝试为此 table 添加一个 onclick 函数。因此，当我单击单元格时，它的颜色将从红色变为蓝色。

相关代码如下：

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border='1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i=0; i<ruudud.value; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);

       for (var j=0; j<ruudud.value; j++){
            var td = document.createElement('TD');
            td.width='50';
            td.height='50';


            td.style.backgroundColor="red";




            tr.appendChild(td);
            }
       }
    myTableDiv.appendChild(table);
}

Answer 1

您可以通过在 for 循环中为每个 td 设置 onclick 属性来实现，它会调用相应的函数来处理 class 更改。可以在 css 中为两个 class 定义颜色。

// for loop addition
    td.setAttribute('class', 'bgRed');
   // and
    td.setAttribute('onclick', chgColor(this));
   // or
    td.onclick(function(this) {return function() {chgColor(this);};})(this);

// Function for changing td background class/color    
    function chgColor(td){  
        td.className == "bgRed" ? td.className = "bgBlue" : td.className = "bgRed";
    }

Answer 2

您可以直接在table上添加事件侦听器，在回调中您可以检查事件源并进行相应操作。事件源将是一个节点，因此如果您想保存任何特定数据，您可以保留属性并在事件发生时读取它们。

Answer 3

有很多方法可以做到这一点，如下所示：
1 - 在 for 循环中

 <div id="myDynamicTable"></div>
 <script type="text/javascript">
     addTable();
  function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i = 0; i < 3 ; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);

        for (var j = 0; j < 2; j++) {
            var td = document.createElement('TD');
            td.width = '50';
            td.height = '50';


            td.style.backgroundColor = "red";

           //************************************************
            td.setAttribute("onclick", "yourFun(this)");

            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function yourFun(tdObj) {
    tdObj.style.backgroundColor = "green";
}

2 - 按功能分类：

<div id="myDynamicTable"></div>
 <script type="text/javascript">
addTable();
setFunction();
function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i = 0; i < 3 ; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);

        for (var j = 0; j < 2; j++) {
            var td = document.createElement('TD');
            td.width = '50';
            td.height = '50';


            td.style.backgroundColor = "red";

            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function setFunction() {
    var myTableDiv = document.getElementById("myDynamicTable");
    var tds = myTableDiv.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        tds[i].setAttribute("onclick", "yourFun(this)");
    }
}

function yourFun(tdObj) {
    tdObj.style.backgroundColor = "green";
}

3- 或者您可以使用事件委托查看此 http://davidwalsh.name/event-delegate

如何在此代码中添加 onClick 函数

How to add onClick function to this code

javascript

onclick

cells