表の挿入インサイド行

私は2つのテーブルが含まれているスクリプトを書きました：tbl1はtbl2は私がピュアJavaScriptのを使用してtbl1第二列に挿入する第二のテーブルで、メインテーブルです。それは完璧に動作しますが、私はコードの後に挿入さ
ノート見たとき、私のtbl2は、いくつかのhtml attribute、それは見ていないしている：tbl1とtbl2は、同じ列ヘッダであり、2つの列をそこに持っている両方。
表の挿入インサイド行

function inserttbl2() { 
 
    var table = document.getElementById("tbl1"); 
 
    var row = table.insertRow(1); 
 
    var celltr = row.insertCell(0); 
 
    row.innerHTML = document.getElementById("tbl2").outerHTML; 
 
}

.myclass{ 
 
background-color: green; 
 
color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p> 
 

 
<table id="tbl1"> 
 
    <tr> 
 
    <td>table 1</td> 
 
    <td>table 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>table 1</td> 
 
    <td>table 1</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<button onclick="inserttbl2()">Insert</button> 
 
<br /> 
 

 
<table id='tbl2' class='myclass'> 
 
<tr> 
 
<td>table 2</td> 
 
<td>table 2</td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

ご覧のとおり、tbl2は、あなたがこのように、あなたのケースのための定期的なappendChildを使用することができます<table id=....>

出典

2017-11-04 Aso

持っていません。

を

function inserttbl2() { 
 
    var table = document.getElementById("tbl1"); 
 
    var row = table.insertRow(1); 
 
    var celltr = row.insertCell(0); 
 
    row.appendChild(document.getElementById("tbl2")); 
 
}

.myclass{ 
 
background-color: green; 
 
color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p> 
 

 
<table id="tbl1"> 
 
    <tr> 
 
    <td>table 1</td> 
 
    <td>table 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>table 1</td> 
 
    <td>table 1</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<button onclick="inserttbl2()">Insert</button> 
 
<br /> 
 

 
<table id='tbl2' class='myclass'> 
 
<tr> 
 
<td>table 2</td> 
 
<td>table 2</td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

最初に完全な2番目の表が挿入されます。

出典

2017-11-04 01:06:19

あなたの答えのtbl2は適切な位置ではありません。あなたはtbl2をdivに送り、tbl1に挿入してください。 – Aso

答えて

関連する問題