如何在这个JavaScript生成的表格中使表格单元格可点击？

xkrw2x1b 于 2023-03-16 发布在 Java

关注(0)|答案(3)|浏览(102)

如何在这个JavaScript生成的表格中使表格单元格可以单击？
我想我在script标记中放置注解的地方就是我需要修改代码的地方。
这段代码到目前为止是有效的：

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

JavaScript

来源：https://stackoverflow.com/questions/16962020/how-do-i-make-a-table-cell-clickable-in-this-javascript-generated-table

3条答案

按热度按时间

b4lqfgs41#

你反对jquery吗？
您可以尝试将jquery添加到标头并添加

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

赞(0）回复(0）举报 2023-03-16

pnwntuvh2#

嗯，是的，您 * 可以 * 将click连接到您放置注解的每个th元素上：

if (th.addEventListener) {
    // Standard
    th.addEventListener('click', clickHandler);
}
else if (th.attachEvent) {
    // IE8 and earlier
    th.attachEvent('onclick', function(e) {
        return clickHandler.call(this, e || window.event);
    });
}

......但最好的办法可能是使用事件委托。在thead元素上挂钩click（因为您只需要th）：

if (thead.addEventListener) {
    // Standard
    thead.addEventListener('click', clickHandler);
}
else if (thead.attachEvent) {
    // IE8 and earlier
    thead.attachEvent('onclick', function(e) {
        return clickHandler.call(this, e || window.event);
    });
}

...然后查看传入clickHandler的事件对象的target属性，这将是实际发生点击的元素（thead的后代，或者thead本身）。
如果您只关心th点击，处理程序可能如下所示：

function clickHandler(e) {
    var target = e.target, th;
    while (target && target !== this) {
        if (target.nodeName.toUpperCase() === "TH") {
            th = target;
            break;
        }
        target = target.parentNode;
    }
    if (th) {
        // It's a th, do something
    }
}

同样的技术可以非常方便地处理对表体中单元格的点击，显然，您可以在tbody或table本身上捕获这些点击，无论您希望如何处理它。
请注意，如果您可以使用一个像样的JavaScript DOM库，例如jQuery、YUI、Closure或any of several others，那么这会简单得多。
例如，jQuery中的事件委托示例：

$(thead).on('click', 'th', function(e) {
    // It's a th, handle it
});

无需IE检查，委托处理已为您完成。

赞(0）回复(0）举报 2023-03-16

yvt65v4c3#

我认为在动态DOM的情况下，事件委托更好，并且将DOM和eventHandler分离也更好。

// or attachEvent, you have to handle corss browsers.
table.addEventListener('click', function(evt) {
  if (evt.target.tagName === 'TD') {
      alert(evt.target.innerHTML);
  }
}

因此，您可以将EventHander添加到表（或目标DOM）中，然后当事件发生时，您可以检查事件发生位置，并根据DOM选择操作。
参见this。

赞(0）回复(0）举报 2023-03-16

我来回答

如何在这个JavaScript生成的表格中使表格单元格可点击？

3条答案

相关问题

热门标签

最新问答