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

Question

How do I make a table cell click able in this JavaScript generated table?

I think where I've placed the comment in the script tag is where I need to change the code!

This code works so far!

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

Answer 1

Are you opposed to jquery?

You could try adding jquery to the header and adding

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

Answer 2

Well, yes, you could hook up click on each and every th element where you've put that comment:

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

...but your best bet is probably to use event delegation. Hook click on the thead element (since you only want the 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);
    });
}

...and then look at the target property on the event object passed into clickHandler . That will be the element on which the click actually occurred (some descendant of the thead , or the thead itself).

If you only care about th clicks, the handler might look something like this:

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

The same technique can be very handy for handling clicks on cells in the table body. Obviously you capture those either on the tbody or the table itself, however you want to handle it.

---

Note that this can be a lot simpler if you can use a decent JavaScript DOM library, such as jQuery , YUI , Closure , or any of several others .

For instance, the event delegation example in jQuery:

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

No IE-checking, and the delegation handling is done for you.

Answer 3

I think event delegating is better in case of dynamic dom. And separating DOM and eventHandler is better too.

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

so, you can add EventHander to your table(or target DOM) and then when event occur, you can check where event is occured from and choose action depends on DOM.

see this .