单击按钮我需要我的表一次添加多行，包含多列......代码是使用java Script构建的....我使用insertcell（）方法来在我的表中插入一个空单元格...当我单击按钮并添加一行时，一次只添加一行.....我想要多行（例如... 7行）通过单击该按钮只显示相同数量的列....
如何制作表格的最后一行（我的意思是如果我一次在表格中添加7行）...我需要第7行边框底部是实心的，并且重复到每个第7个边框底部。 ....在上面的程序中......我也可以在上面的程序中得到一些使用rowspan和colspan的想法
function display(){
var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
var rowsAdd = tableRef.insertRow();
var newCell = rowsAdd.insertCell();
newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'time' name= 'time' required> </td></tr><tr></tr>";
newCell.style.width ='70px';
newCell = rowsAdd.insertCell();
newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oraltype' name= 'oraltype' required></td></tr><tr></tr>";
newCell.style.width ='55px';
newCell= rowsAdd.insertCell();
newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt' name= 'oralamt' required></td></tr>";
newCell.style.width ='75px';
newCell = rowsAdd.insertCell();
newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oralcommence' name= 'oralcommence' required></td></tr>";
newCell.style.width ='65px';
newCell = rowsAdd.insertCell();
newCell.innerHTML="<tr><td><i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i></td></tr><tr></tr>";
newCell.style.width ='50px';
}
#myTable1 {
border-collapse: collapse;
width: 100%;
}
#myTable1 th {
background-color: #009999;
color: black;
width : 190px;
}
.table-fixed{
}
#myTable1 .tbody1{
height:150px;
overflow-y:auto;
}
#myTable1 thead,.tbody1{
display:block;
}<table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="width: 1200px; align:left;" id="myTable1">
<thead>
<tr>
<th rowspan = '2' style="width:130px;">Date Comm.</th>
<th rowspan='2' style="width:130px;">Drug</th>
<th rowspan='2' style="width:130px;">Dosage</th>
<th rowspan='2'style="width:130px;">Route Of Admin</th>
</tr>
</thead>
<tbody class="tbody1">
</tbody>
<tr id="hiderow">
<td><button onclick="display()"></button></td>
</tr>
</table>
答案 0 :(得分：0)
循环的这种用法对你有用吗？每当你调用函数display（）时，你想要为它提供你想要创建的行数。
for这是未经测试的Js，因此可能需要稍作调整：）
您可以在this article here上找到有关{{1}}循环使用情况的更多信息！您还可以找到有关函数参数here的更多信息。
答案 1 :(得分：0)
尝试添加两行 -
var rowsAdd = tableRef.insertRow(tableRef.rows.length);
var rowsAddNext = tableRef.insertRow(tableRef.rows.length + 1);
.............. // your code of adding cell into rows
答案 2 :(得分：0)
以下代码将创建10行。我已更新第1个字段的ID（时间id = 'time_" + i + "'），以便为其提供唯一ID。您可以选择为每个字段提供唯一的ID，以便您可以从JS中读取值。
function display() {
var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
for (i = 0; i < 10; i++) {
var rowsAdd = tableRef.insertRow();
var newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'time_" + i + "' name= 'time' required> </td></tr><tr></tr>";
newCell.style.width = '70px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oraltype' name= 'oraltype' required></td></tr><tr></tr>";
newCell.style.width = '55px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt' name= 'oralamt' required></td></tr>";
newCell.style.width = '75px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oralcommence' name= 'oralcommence' required></td></tr>";
newCell.style.width = '65px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i></td></tr><tr></tr>";
newCell.style.width = '50px';
}
}
答案 3 :(得分：0)
尝试运行下面的代码段或 CodePen Demo 。
您可以在添加按钮旁边的选择菜单中选择要添加的行数：
function display() {
var tableRef = document
.getElementById("myTable1")
.getElementsByTagName("tbody")[0];
var numRows = document.getElementById('numRows').value;
for (var i = 0; i < numRows; i++) {
var rowsAdd = tableRef.insertRow();
var newCell = rowsAdd.insertCell();
addRows(newCell, rowsAdd);
}
}
function removeRows() {
document.getElementById('tbody').innerHTML = '';
}
function addRows(newCell, rowsAdd) {
newCell.innerHTML =
"<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'time' name= 'time' required> </td></tr><tr></tr>";
newCell.style.width = "70px";
newCell = rowsAdd.insertCell();
newCell.innerHTML =
"<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oraltype' name= 'oraltype' required></td></tr><tr></tr>";
newCell.style.width = "55px";
newCell = rowsAdd.insertCell();
newCell.innerHTML =
"<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt' name= 'oralamt' required></td></tr>";
newCell.style.width = "75px";
newCell = rowsAdd.insertCell();
newCell.innerHTML =
"<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oralcommence' name= 'oralcommence' required></td></tr>";
newCell.style.width = "65px";
newCell = rowsAdd.insertCell();
newCell.innerHTML =
"<tr><td><i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i></td></tr><tr></tr>";
newCell.style.width = "50px";
}#myTable1 {
border-collapse: collapse;
width: 100%;
}
#myTable1 th {
background-color: #009999;
color: black;
width: 190px;
}
.table-fixed {}
#myTable1 .tbody1 {
height: 150px;
overflow-y: auto;
}
#myTable1 thead,
.tbody1 {
display: block;
}<table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="width: 1200px; align:left;" id="myTable1">
<thead>
<tr>
<th rowspan='2' style="width:130px;">Date Comm.</th>
<th rowspan='2' style="width:130px;">Drug</th>
<th rowspan='2' style="width:130px;">Dosage</th>
<th rowspan='2' style="width:130px;">Route Of Admin</th>
<th rowspan='2' style="width:50px;">Delete</th>
</tr>
</thead>
<tbody class="tbody1" id='tbody'>
</tbody>
<tr id="hiderow">
<td>
<select id="numRows">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button onclick="display()">Add row(s)</button>
<button onclick="removeRows()">Remove all rows </button>
</td>
</tr>
</table>
答案 4 :(得分：0)
我想你想要如下例子：
iterables$(document).ready(function display(){
$('#add').click(function(){
var row_c = $('#row_count').val();
var row = "<tr> <td ><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> <td><input type='text'></td> </tr>";
for(var i=0;i < row_c ;i++){
$('#myTable1').find('thead').append(row);
}
})
})#myTable1 {
border-collapse: collapse;
width: 100%;
}
tr{
width: 100%;
display: inline-block;
}
#myTable1 th {
background-color: #009999;
color: black;
width : 190px;
}
.table-fixed{
}
#myTable1 .tbody1{
height:150px;
overflow-y:auto;
}
#myTable1 thead,.tbody1{
display:block;
}