javascript - 如何在此 JavaScript 生成的表格中使表格单元格可单击?

标签 javascript dom-events

如何在此 JavaScript 生成的表格中使表格单元格可单击?

我认为我在脚本标记中放置注释的位置就是我需要更改代码的位置。

此代码到目前为止有效:

function createTable(data) {
    var table = document.createElement("table");
    table.style.border = "1px solid #ffcc33";
    var thead = document.createElement("thead");
    thead.style.padding = "5px";
    var tr = document.createElement("tr");
    for (var i = 0;i < data[0].length; i++){
            var th = document.createElement("th");
            th.style.border = "2px solid #ff0000";
            var newText = document.createTextNode(data[0][i]);
            // maybe an onclick goes here!
            th.appendChild(newText);
            tr.appendChild(th);
        }
        thead.appendChild(tr);
        table.appendChild(thead);
        
        var tbody = document.createElement("tbody");
        for(var i=1;i<data.length;i++){
            var tr = document.createElement("tr");
            for(var j=0;j<data[i].length;j++){  
                var td = document.createElement("td");
                td.style.padding = "5px";
                td.style.border = "2px solid #00ff00";
                var newText = document.createTextNode(data[i][j]);
                td.appendChild(newText);
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
            }
            table.appendChild(tbody);               return table;
        
  }
  window.onload = function() {
        var table = createTable ([
        ["1","2","3","4"],
        ["One","Two","Three","Four"],
        ["Un","Deux","Trois","Quatre"],
        ["eins","zwei","drei","vier"]
        ]);
        document.body.appendChild(table)
      }

最佳答案

你反对jquery吗?

您可以尝试将 jquery 添加到 header 并添加

$(newText).click(function(){
     //do stuff
});

关于javascript - 如何在此 JavaScript 生成的表格中使表格单元格可单击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16962020/

相关文章:

javascript - 如何在 InfoBubble 内调用外部点击事件 - 此处 API Javascript 3

javascript - 以十六进制设置背景颜色

javascript - Laravel 中未显示 Vue 组件

Javascript DOMContentLoaded 事件未在 Internet Explorer 中触发

javascript - 如何在循环中更改getElementById的参数

javascript - JavaScript 中的事件监听器

javascript - 如何检查表单中是否单击了动态生成的单选按钮?

javascript - Emberjs 1.0 : How to create Models and display them in another route?

javascript - 使用 mocha 和 browserify 进行测试

javascript - 全局命名空间中事件的最佳实践?