如何在这个JavaScript生成的表中创建一个可点击的表格单元格?
How do I make a table cell clickable in this JavaScript generated table?
如何在这个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)
}
你反对jquery吗?
你可以尝试在header中添加jquery并添加
$(newText).click(function(){
//do stuff
});
嗯,是的,你可以将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);
});
}
…但是您最好的选择可能是使用事件委托。将click
与thead
元素挂钩(因为您只需要th
s):
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或其他几个库中的任何一个,这可以是一个许多更简单。
例如,jQuery中的事件委托示例:
$(thead).on('click', 'th', function(e) {
// It's a th, handle it
});
不检查ie,委托处理为您完成。
我认为事件委托在动态dom的情况下更好。而且把DOM和eventandler分开也更好。
// 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选择操作。
。
相关文章:
- 在 SlickGrid 中编辑后,根据不同列中的另一个单元格清除单元格
- 申请表要求在提交前一个单元格与其他单元格相等
- 每行仅突出显示一个单元格
- Google Apps 脚本,用于根据一个单元格的值对另一个单元格进行条件颜色格式设置
- 只在表中突出显示一个单元格值
- 当一个单元格被编辑时,是否有一个事件触发,但值没有'不要改变
- 我希望joint.js库读取我的JSON并将其显示为一个单元格:rect和circle
- 用JQuery在廉价的excel表格上标记最后一个单元格
- 在 jQuery 中获取表的上一个或下一个单元格值
- 获取上一个单元格的图像
- 如何将类添加到由摘要功能生成的网格的一个单元格
- 使用查询选择器查找同级行中包含的下一个单元格
- 当按 Tab 键经过最后一个单元格时,自动在 ng-grid 中添加行
- 数组最后一个单元格中不需要的对象
- 在 jqxGrid 中按一个单元格的值选择一行
- 如何在访问子网格视图时获取父网格视图的一个单元格的值
- 为其中一个单元格或 td 查找 colSpan 标头是 Spans
- 将多个具有相同名称的文本输入插入到 MySql 中的一个单元格中
- 如何使用来自另一个单元格的 onChange 事件更新一个单元格
- 下一个单元格上可自动点击的电子邮件地址.应用程序脚本