使用行跨度中的JavaScript程序

Question

如何使用rowspan的或列跨度，使得第一兩列是因爲它是（即單排的前2列是本爲只有一次，重複多次所述其它行）和其餘的行重複7次......我在我的程序中使用insertcell方法.....或者我可以得到一些想法，我可以使最後一行底部邊界變厚。 。在上述程序它被重複7次...... expected table

function display() { 
 

 
    var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0]; 
 

 
    for (i = 0; i < 7; 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' name= 'time' required></td></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>"; 
 
    newCell.style.width = '50px'; 
 

 
    newCell = rowsAdd.insertCell(); 
 
    newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt_" + i + "' 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_" + i + "' name= 'oralcommence' required></td></tr>"; 
 
    newCell.style.width = '65px'; 
 

 

 
    newCell = rowsAdd.insertCell(); 
 
    newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' ' id = 'amtgiv_" + i + "' name= 'amtgiv' required></td></tr>"; 
 
    newCell.style.width = '75px'; 
 

 
    newCell = rowsAdd.insertCell(); 
 
    newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'urine_" + i + "' name= 'urine' required></td></tr>"; 
 
    newCell.style.width = '60px'; 
 

 
    newCell = rowsAdd.insertCell(); 
 
    newCell.innerHTML = "<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'remarks_" + i + "' name= 'remarks' required></td></tr>"; 
 
    newCell.style.width = '50px'; 
 

 
    newCell = rowsAdd.insertCell(); 
 
    newCell.innerHTML = "<tr><td><i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i></td></tr>"; 
 
    newCell.style.width = '50px'; 
 

 
    } 
 

 

 
}

#myTable1 { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    margin-left: 20px; 
 
} 
 

 
#myTable1 th { 
 
    background-color: #009999; 
 
    color: black; 
 
    width: 210px; 
 
} 
 

 
.table-fixed {} 
 

 
#myTable1 .tbody1 { 
 
    height: 200px; 
 
    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: center;" 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:130px;">Ordered By</th> 
 
     <th rowspan='2' style="width:130px;">Time</th> 
 
     <th rowspan='2' style="width:50px;">Delete</th> 
 

 

 
    </tr> 
 

 
    </thead> 
 
    <tbody class="tbody1"> 
 
    </tbody> 
 
    <tr id="hiderow"> 
 
    <td><button onclick="display()"></button></td> 
 
    </tr> 
 

 
</table>

Answer 1

我修改了顯示功能：

function display() { 

     var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0]; 

     for (i = 0; i < 7; i++) { 
      var rowsAdd = tableRef.insertRow(); 
       if (i<1) 
      { 
       var newCell = rowsAdd.insertCell(); 
      newCell.innerHTML="<input form ='forma' class= 'form-control input-sm' type='text' id = 'time' name= 'time' required>"; 
      newCell.rowSpan=7; 
      newCell.style.width = '70px'; 

       var newCell = rowsAdd.insertCell(); 
      newCell.innerHTML="<input form ='forma' class= 'form-control input-sm' id = 'oraltype' name= 'oraltype' required>"; 
      newCell.rowSpan=7; 
      newCell.style.width = '50px'; 
      } 
       var newCell = rowsAdd.insertCell(); 
      newCell.innerHTML="<input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt_" + i + "' name= 'oralamt' required></td></tr>"; 
      newCell.style.width = '75px'; 

      newCell = rowsAdd.insertCell(); 
      newCell.innerHTML = "<input form ='forma' class= 'form-control input-sm' id = 'oralcommence_" + i + "' name= 'oralcommence' required>"; 
      newCell.style.width = '65px'; 

      newCell = rowsAdd.insertCell(); 
      newCell.innerHTML = "<input form ='forma' class= 'form-control input-sm' ' id = 'amtgiv_" + i + "' name= 'amtgiv' required>"; 
      newCell.style.width = '75px'; 

      newCell = rowsAdd.insertCell(); 
      newCell.innerHTML = "<input form ='forma' class= 'form-control input-sm' type='text' id = 'urine_" + i + "' name= 'urine' required>"; 
      newCell.style.width = '60px'; 

      newCell = rowsAdd.insertCell(); 
      newCell.innerHTML = "<input form ='forma' class= 'form-control input-sm' type='text' id = 'remarks_" + i + "' name= 'remarks' required>"; 
      newCell.style.width = '50px'; 

      newCell = rowsAdd.insertCell(); 
      newCell.innerHTML = "<i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i>"; 
      newCell.style.width = '50px'; 


     } 


    } 

您可能會在here中看到演示。