0

この 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)
      }
4

3 に答える 3

1

jqueryに反対ですか？

ヘッダーにjqueryを追加して追加してみてください

$(newText).click(function(){
     //do stuff
});
于 2013-06-06T12:27:45.413 に答える
1

そうです、そのコメントを入れたすべての要素に接続できます。clickth

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ます（thsのみが必要なため）：

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

...次に、target渡されたイベント オブジェクトのプロパティを確認しclickHandlerます。これは、クリックが実際に発生した要素になります ( の子孫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それを処理したいと考えています。

jQuery、YUI、Closure、または他のいくつかのいずれかなどの適切な JavaScript DOM ライブラリを使用できる場合、これははるかに簡単になることに注意してください。

たとえば、jQuery でのイベント委任の例:

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

IE チェックは不要で、委任処理は自動的に行われます。

于 2013-06-06T12:28:01.477 に答える
0

動的 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 に依存するアクションを選択することができます。

これを参照してください。

于 2013-06-06T12:44:18.020 に答える