1. 首頁
  2. 問答
  3. 要生成多行

要生成多行

2017-08-28 65 views
0

點擊按鈕我需要我的表一次添加多個行，包括多列.....代碼是通過使用Java腳本....我使用插入單元格（）方法插入一個空的單元格在我的表.....當我點擊按鈕，並添加一行，一次只有一個單行添加.....我想多行（例如... 7行）具有相同數量的列，通過單擊該按鈕僅顯示一次....要生成多行

我怎樣才能使表的最後一行（我的意思是如果我一次在表中添加7行） ...我需要第7行邊界底部是堅實的，並重復到每個第7邊界底部.....在上面的程序......還可以得到一些使用rowspan和colspan的想法以上程序

function display(){ 
 

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

 
\t var newCell = rowsAdd.insertCell(); 
 
\t newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'time' name= 'time' required> </td></tr><tr></tr>"; 
 
\t newCell.style.width ='70px'; 
 
\t 
 
\t newCell = rowsAdd.insertCell(); 
 
\t newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oraltype' name= 'oraltype' required></td></tr><tr></tr>"; 
 
\t newCell.style.width ='55px'; 
 
\t 
 
\t newCell= rowsAdd.insertCell(); 
 
\t newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' type='text' id = 'oralamt' name= 'oralamt' required></td></tr>"; 
 
\t newCell.style.width ='75px'; 
 
\t 
 
\t 
 
\t newCell = rowsAdd.insertCell(); 
 
\t newCell.innerHTML="<tr><td><input form ='forma' class= 'form-control input-sm' id = 'oralcommence' name= 'oralcommence' required></td></tr>"; 
 
\t newCell.style.width ='65px'; 
 
     newCell = rowsAdd.insertCell(); 
 
     
 
\t newCell.innerHTML="<tr><td><i class='fa fa-trash-o' style='font-size:20px' onclick='deleteRow(this)'></i></td></tr><tr></tr>"; 
 
\t newCell.style.width ='50px'; 
 

 
\t }

 
#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"> 
 
\t \t  <td><button onclick="display()"></button></td> 
 
\t \t </tr> 
 
\t \t 
 
    </table>

來源

2017-08-28 usr

回答

0

下面的代碼將創建10行。我已經更新了第一個字段的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'; 
    } 
}

來源

2017-08-28 10:03:09

+0

我該如何製作表格的最後一行（我的意思是如果我一次在表格中添加7行）......我需要第7行邊框底部變得牢固，並且重複到每個第7個邊框底部... ..在上面的程序中......還可以在上述程序中使用rowspan和colspan的一些想法 – usr

0

會循環的這種用法是任何對你有用嗎？每當你調用函數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環路上this article here使用！您還可以瞭解更多關於功能參數here的信息。

來源

2017-08-28 09:56:25 Will

0

嘗試添加兩行 -

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

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

來源

2017-08-28 09:59:30 MukulSharma

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>

來源

2017-08-28 10:38:31

0

我想你想要像下面的例子：

$(document).ready(function display(){ 
 
\t 
 
    
 
    
 
    
 
    $('#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"> 
 
\t \t  <td> 
 
     <input type='text' id='row_count'/><button id='add'>Add Row</button></td> 
 
\t \t </tr> 
 
\t \t 
 
    </table>

來源

2017-08-28 10:47:21

+0

如何使表格的最後一行（我的意思是如果我在表格中添加7行一次）...我需要第7行邊界底部是堅實的，並重復到每個第7邊界底部.....在上面的程序......也可以得到一些使用rowspan的想法和上述程序中的colspan – usr

相關問題

 相關問題