javascript - 在 javascript 程序中使用 rowspan

Question

我如何使用 rowspan 或 colspan 以便前两列保持原样(即单行的前 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 中看到演示.