При нажатии на кнопку мне нужно, чтобы моя таблица была добавлена сразу несколькими строками, состоящими из нескольких столбцов ..... код строится с помощью 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
usr 28 Авг 2017 в 12:49

5 ответов

Лучший ответ

Код ниже создаст 10 строк. Я обновил идентификатор для 1-го поля (время id = 'time_" + i + "'), чтобы дать ему уникальный идентификатор. Вы можете указать уникальные идентификаторы для каждого поля, чтобы вы могли читать значения из 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';
    }
}
0
Phani Kumar M 28 Авг 2017 в 10:03

Попробуйте запустить фрагмент ниже или эту демонстрацию CodePen .

Вы можете выбрать, сколько строк вы хотите добавить в меню выбора рядом с кнопкой добавления:

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>
0
Dan Kreiger 28 Авг 2017 в 10:38

Будет ли это использование цикла полезным для вас? Всякий раз, когда вы вызываете функцию display (), вы хотите указать количество строк, которые вы хотите создать.

function display(timesToLoop) {

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

    for (i = 0; i < timesToLoop; i++) {
        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';

    }

}

Это непроверенный Js, поэтому может потребоваться небольшая корректировка здесь и там :)

Вы можете узнать больше об использовании for циклов в этой статье здесь ! Вы также можете узнать больше о параметрах функции здесь.

0
Will 28 Авг 2017 в 09:56

Попробуйте добавить две строки -

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

.............. // your code of adding cell into rows
0
Al Foиce ѫ 28 Авг 2017 в 11:19

Я думаю, что вы хотите, как ниже пример:

$(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;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-fixed table-hover table-condensed" border='1' id="myTable1">
    <thead>
      <tr>
        <th rowspan = '2' >Date Comm.</th>
        <th rowspan='2' >Drug</th>
        <th  rowspan='2' >Dosage</th>
        <th  rowspan='2'>Route Of Admin</th>
         <th  rowspan='2' >Delete</th>
        </tr>
    </thead>
    <tbody class="tbody1">

   
    </tbody>
     <tr id="hiderow">
		    <td>
        <input type='text' id='row_count'/><button id='add'>Add Row</button></td>
		  </tr>
		  
    </table>
0
Maulik Barad 28 Авг 2017 в 10:47