2016-04-26 14 views
3

は、<table>に2つの<td>を動的に追加しようとしていますが、私のフィドルは何もしないようです。動的にテーブルに行を追加する

フィドル:https://jsfiddle.net/otL69Lpo/2/

HTML:出力としてあるべき

function myFunction() { 
    var table = document.getElementById("chatHistoryTable"); 

    var tr = document.createElement("tr"); 
    var td = document.createElement("td"); 
    var td2 = document.createElement("td"); 
    var txt = document.createTextNode("TIMESTAMP"); 
    var txt2 = document.createTextNode("user: text"); 

    td.appendChild(txt); 
    td2.appendChild(txt2); 
    tr.appendChild(td); 
    tr.appendChild(td2); 
    table.appendChild(tr); 
} 

<button type="button" onclick="myFunction()">Click Me!</button> 

<table class="table table-bordered" id="chatHistoryTable"> 
    <tr> 
    <td> 
     12:30:30 
    </td> 
    <td> 
     text here 
    </td> 
</table> 

JS

| TIMESTAMP | user: text | 
+0

私がjsのロードタイプを変更しますjsfiddleのボディー&働いています https://jsfiddle.net/otL69Lpo/3/ – brk

答えて

2

これは、JSFにおける共通の課題でありますiddle。 JSをロードすると、あなたはどちらかにロードを変更する必要がありますどのようにするためのいくつかのオプションがあります。

  • No wrap - in <head>
  • No wrap - in <body>

enter image description here

関連する問題