Question

我正在尝试向此表添加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

有很多方法可以做到这一点，如下所示：
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

Answer 2

您可以通过为for循环中的每个td设置onclick属性来执行此操作，该属性调用相应的函数来处理类更改。可以在css中为两个类定义颜色。

// 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 3

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

如何将onClick函数添加到此代码中

3 个答案: