動的にhtmlテーブルを変更するJavascript

GitHubがプロジェクトの概要を表示するのと同様に、私は自分が動的に変化する単一のページに存在することを除いて、リポジトリの概要を作成しようとしています。動的にhtmlテーブルを変更するJavascript

基本的な概要を持つテーブルを作成してから別の行をクリックすると、行の内容（その行の要素に内容がある場合）が表示されます。

ここに私が今いるのですが、実際にテーブルを更新するリンク要素を持つように行を取得するのに問題があります。私がコンソールから関数を呼び出すと、それはうまく動作するように見えますが、それは本当に私が思うところで助けが必要なことへのリンクです。

JS：

var Table = document.createElement('table'); 

function updateTable(node) { 
    Table.innerHTML = ""; 
    if (node.children !== undefined){ 
     for (var i = 0; i < node.children.length; i++){ 
      var tr = document.createElement('tr'); 
      if (node.children[i].hasChildren){ 
       var a = document.createElement('a'); 
       a.setAttribute('onclick', "updateTable(" + node.children[i] + ")"); 
       a.appendChild(document.createTextNode(node.children[i].name)); 
       tr.appendChild(a); 
      } else { 
       tr.appendChild(document.createTextNode(node.children[i].name)); 
      } 
      Table.appendChild(tr); 
      document.getElementById('table').appendChild(Table); 
     } 
    } 
} 

var node = {name:'a', parent: null, children:[], size:0, hasChildren:true}; 
var node11 = {name:'gsidfhuo', parent: node1, children:[], size:0, hasChildren:false}; 
var node12 = {name:'sdlj', parent: node1, children:[], size:0, hasChildren:false}; 
var node1 = {name:'aasdf', parent: node, children:[node11,node12], size:2, hasChildren:true}; 
node.children.push(node1); 
var node2 = {name:'ahtrs', parent: node, children:[], size:0, hasChildren:false}; 
node.children.push(node2); 
var node31 = {name:'gsidfhuo', parent: node1, children:[], size:0, hasChildren:false}; 
var node3 = {name:'aawsefd', parent: node, children:[node31], size:1, hasChildren:true}; 
node.children.push(node3); 
var node4 = {name:'aikuyr', parent: node, children:[], size:0, hasChildren:false}; 
node.children.push(node4); 



updateTable(node);

HTML：

<!doctype html> 
<html lang='en'> 

<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
</head> 

<body> 
    <div class="container"> 
    <h1 class="txt"> Test Table</h1> 
    <font style="font-size:+3"><table id="table" border="1px" style="width:50%"></table></font> 
    </div> 
    <script src='App.js'></script> 
</body> 

</html>

出典

2016-04-16 Mas

問題は、この行を次のとおりです。

a.setAttribute('onclick', "updateTable(" + node.children[i] + ")");

あなたがオブジェクトと文字列を連結している（node.children [i]）、式の結果は文字列です10のため、呼び出しが失敗する理由です。

要素のonclick属性は文字列を受け入れるため、探しているものと異なる場合があります。代わりに、次のようなクリックイベントリスナーを添付することができます。

a.addEventListener('click', function(clickEvent){ 
    // onclick behavior here 
}

出典

2016-04-16 20:12:47 tome

いいえ、これを試してみましたが、今ではテーブルが全く機能しません。ノードから構築された初期テーブルには、node31、node3、node4が表示されます。これらのリンクをクリックすると、まったく更新されません。ブラウザーの要素を見ると、イベントリスナーはリンクのある行にも表示されません。あなたが言及したa.setAttributeを削除し、それをa.addEventListener（ 'click'、updateTable（node.children [i]））に置き換えました。 – Mas

動的にhtmlテーブルを変更するJavascript

答えて

関連する問題