[英]How do I make a blank empty cell in a table clickable and make it display something on another table using javascript?
[英]How do I make a table cell clickable in this JavaScript generated table?
如何在此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添加到標題並添加
$(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
或多個):
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 , 關閉 ,或任何其他幾個人的 。
例如,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的操作。
看到這個 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.