我需要使用javascript在表中追加一些行（比如10）。该行将从一个单独的静态html页面获取（我猜使用id可以获取它们）。 html将是静态的，因此它被用作模板。怎么做到呢。因为我是一个初学者，我无法超越下面的代码思考。
var myTableDiv = document.getElementById("DivTable");
var tableBody = document.getElementById("tBody");
var table = document.getElementById('Table');
for (var i = 0; i < 3; i++) {
var tr = document.getElementById('tableRow');
var TD1= document.getElementById('FirstColumn');
var TD2= document.getElementById('ScondColumn');
var TD3= document.getElementById('ThirdColumn');
var TD4= document.getElementById('FourthColumn');
var TD5= document.getElementById('FifthColumn');
tr.appendChild(TD1);
tr.appendChild(TD2);
tr.appendChild(TD3);
tr.appendChild(TD4);
tr.appendChild(TD5);
tableBody.appendChild(tr);
myTableDiv.appendChild(table);
}
我想这会导致行重叠。不确定。请更正。
HTML here ...
<div class="MgmtView" id="DivTable">
<table class="projectMgmtTable" width="100%" id="Table">
<thead>
<tr>
<th><h4>Review</h4></th>
<th>Sort
<select>
<option>Sample 1</option>
<option>Sample 2</option>
</select>
<div>
<div class="sortUpArrow"></div>
<div class="sortDownArrow"></div>
</div>
</th>
</tr>
</thead>
<tbody id="tBody">
<tr class="rowTable" id="tableRow">
<td id="FirstColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">ID</div>
<div class="labelRight">1</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Address</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="11"></textarea>
</div>
</div>
</div>
</td>
<td id="ScondColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Location</div>
<div class="labelRight">
<select disabled="disabled">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Country</div>
<div class="labelRight">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Division</div>
<div class="labelRight">
<select class="showRpn">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row rpnSection dispNone">
<div class="table-cell">
<div class="labelLeft">Amount</div>
<div class="labelRight">
<input value="123" class="greenBg" type="text" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">date of birth</div>
<div class="labelRight">
<input type="text" disabled="disabled" class="calendar" />
</div>
</div>
</div>
</td>
<td id="ThirdColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Relationship</div>
<div class="labelLeft">
<textarea disabled="disabled" placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Date</div>
<div class="labelRight">
<input disabled="disabled" type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">MStatus</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FourthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Plan</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Target Date</div>
<div class="labelRight">
<input type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FifthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Category</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Action</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
</td>
</tr>
<tr class="noBorder">
<td colspan="5"> </td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
javascript appendChild（）函数将内容附加到所选元素。在这里，如果要将行添加到现有表，则必须使用require内容创建表行的字符串。然后你可以追加它。 所以，请考虑这是您的HTML表格。
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody id="tBody">
<tr><td>Sam</td>India</tr>
</tbody>
</table>
如果要添加新行，请在javascript中创建行元素（字符串）
var str="<tr><td>Bob</td><td>India Maharashtra</td></tr>";
var tableBody = document.getElementById("tBody");
tableBody.appendChild(str);
如果要添加空白行，则只传递空白td，如
var str="<tr><td></td><td></td></tr>";
试试这个。
答案 1 :(得分：0)
试用此代码： 在append（）函数的帮助下，你将添加它像这样： 检查小提琴链接也进行演示
$(document).ready(function(){
$("table tbody").append("<tr><td>asdf</td><td>asasdsdf</td></tr>");
});
答案 2 :(得分：0)
查看此演示--- fiddle
var myTable = document.getElementById("tableID");
var appenDiv = document.getElementById("wrap");
var newTable = document.createElement("table");
appenDiv.appendChild(newTable);
for(var i=0;i<2;i++){
var tr = myTable.rows[i];
var cln = tr.cloneNode(true);
newTable.appendChild(cln);
}
我相信它可以帮助您了解如何附加html表格行。