Question

以下代码会添加文本框值中的行。我需要在页面中将行数限制为10，并以分页格式显示下一行。用户可以输入页码以导航或上一页，下一页按钮。我尝试使用Datatables插件但是无法让它适用于这种情况。当表内容是静态的时，它工作正常，即所有tr，td都在代码中定义。在这里实施分页的任何其他想法？

<!DOCTYPE html> <html> <head> <title>HTML dynamic table using JavaScript</title> <script type="text/javascript" src="app.js"></script> </head> <body onload="load()">   <div id="myform"> <b>Simple form with name and age ...          </b> 
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name" value="" />
</td>
</tr>
<tr>
<td><input type="button" id="add" value="Add"></td></tr><tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table></div><div id="mydata"><b>Current data in the system ...</b> 
<table id="myTableData" border="1" cellpadding="2">
<tr> <td>&nbsp;</td><td><b>Name</b></td><td><b>Sr no</b></td></tr>
</table>&nbsp;<br/></div><div id="myDynamicTable"></div>
</body> </html>

使用Javascript：

 function renumber() { 
     var table =           document.getElementById("myTableData"),  srnos=document.querySelectorAll(".srno")
    for (var i=0;i<srnos.length;i++) {
srnos[i].innerHTML=(i+1);
 } 
 } 
function addRow() {
   var myName =        document.getElementById("name").value;
    var table = document.getElementById("myTableData");
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
      row.insertCell(0).innerHTML = '<input         type="button" value = "Delete"       onClick="deleteRow(this)">';
       row.insertCell(1).innerHTML = myName || "";
        row.insertCell(2).innerHTML =     row.rowIndex;
    row.cells[row.cells.length-1].className="srno";
 }
function deleteRow(obj) {
    var index =  obj.parentNode.parentNode.rowIndex;
     var table = document.getElementById("myTableData");
 table.deleteRow(index);
 renumber();
   }
     function addTable() {
     var myTableDiv =  document.getElementById("myDynamicTable");
     var table = document.createElement('TABLE');
     table.border = '1';
     var tableBody = document.createElement('TBODY');
     table.appendChild(tableBody);
     for (var i = 0; i < 3; i++) {
     var tr = document.createElement('TR');
    tableBody.appendChild(tr);
      for (var j = 0; j < 4; j++) {
      var td = document.createElement('TD');
       td.className="srno";
      td.width = '75';
             td.appendChild(document.createTextNode("Cell " + i + "," + j));
     tr.appendChild(td);
     }
   }
   myTableDiv.appendChild(table);
   renumber();
   }
 window.onload=function() {
    document.getElementById("add").onclick=addRow;
   console.log("Page load finished");
   }

如何为从文本框值创建的动态表添加分页？

0 个答案: