如何在这个JavaScript生成的表中使表单元格可单击?
如何在这个JavaScript生成的表中使表单元格可以单击 我认为我在脚本标签中放置注释的地方就是我需要更改代码的地方 到目前为止,这段代码仍然有效如何在这个JavaScript生成的表中使表单元格可单击?,javascript,javascript-events,Javascript,Javascript Events,如何在这个JavaScript生成的表中使表单元格可以单击 我认为我在脚本标签中放置注释的地方就是我需要更改代码的地方 到目前为止,这段代码仍然有效 function createTable(data) { var table = document.createElement("table"); table.style.border = "1px solid #ffcc33"; var thead = document.createElement("thead");
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)
}
函数createTable(数据){
var table=document.createElement(“表”);
table.style.border=“1px solid#ffcc33”;
var thead=document.createElement(“thead”);
thead.style.padding=“5px”;
var tr=document.createElement(“tr”);
对于(var i=0;i对于(var i=1;i您反对jquery吗
您可以尝试将jquery添加到标头并添加
$(newText).click(function(){
//do stuff
});
好的,是的,你可以连接点击每个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
元素上的(因为您只需要th
s):
…然后查看传递到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
或表本身上捕获这些点击,但是您需要处理它们
请注意,如果您可以使用一个像样的JavaScript DOM库,例如、、或,那么这将非常简单
例如,jQuery中的事件委派示例:
$(thead).on('click', 'th', function(e) {
// It's a th, handle it
});
没有IE检查,委派处理为您完成。我认为在动态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选择操作
请参阅。请不要只发布jQuery对非jQuery问题的回答。这就是为什么我在回答的开头加上“你反对jQuery吗?”如果海报只要求纯javascript,我通常不会发布jQuery
// or attachEvent, you have to handle corss browsers.
table.addEventListener('click', function(evt) {
if (evt.target.tagName === 'TD') {
alert(evt.target.innerHTML);
}
}