Question

单击按钮我需要我的表一次添加多行，包含多列......代码是使用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>

Answer 1

循环的这种用法对你有用吗？每当你调用函数display（）时，你想要为它提供你想要创建的行数。

for

这是未经测试的Js，因此可能需要稍作调整：）

您可以在this article here上找到有关{{1}}循环使用情况的更多信息！您还可以找到有关函数参数here的更多信息。

Answer 2

尝试添加两行 -

var rowsAdd = tableRef.insertRow(tableRef.rows.length); 
var rowsAddNext = tableRef.insertRow(tableRef.rows.length + 1); 

.............. // your code of adding cell into rows

Answer 3

以下代码将创建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';
    }
}

Answer 4

尝试运行下面的代码段或 CodePen Demo 。

您可以在添加按钮旁边的选择菜单中选择要添加的行数：

＆＃13;

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";
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 5

我想你想要如下例子：

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;
  }

生成多行

5 个答案: