JavaScript dyanmic表添加/刪除行

-2

我正在嘗試構建一個用於創建映像部署列表的表單。JavaScript dyanmic表添加/刪除行

Image example of my table

我能夠在形式負荷爲每個值創建一個動態表，並收集數據，但似乎得到添加和刪除工作。我的問題：

我的代碼中必須做些什麼（或更改）才能使ADD和Delete選項正常工作並導出CSV格式的表格數據。

請能有人幫助和/或指導我，因爲我得到這麼輸，真正想工作的例子..還有就是它的了空前筆者走訪最新發生的淨與其說是Mozilla的DOM幫助頁面什麼令人困惑的是如何將自己的變量加載到表

僅供參考我用計算器和大量的谷歌終於this site

這裏是我的代碼：

<div id="metric_results"> 
Enter Target Name: 
<input type="text" name="textbox1" id="textbox1" VALUE="win2k8"/> 
<br> 
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()"> 
<input type="button" id="create" value="Add Row" onclick="Javascript:addRow()"> 
<input type="button" id="create" value="Delete Row" onclick="Javascript:deleteRow()"> 

</div> 

<SCRIPT LANGUAGE="JavaScript"> 
window.onload =addTable;//loads table on window loading 
function addTable() { 
var myTableDiv = document.getElementById("metric_results") 
var table = document.createElement('TABLE') 
var tableBody = document.createElement('TBODY') 
var imageName = textbox1.value 
table.border = '1' 
table.appendChild(tableBody); 

var heading = new Array(); 
heading[0] = "imageName" 
heading[1] = "acceptAllEula" 
heading[2] = "noSSLverify" 
heading[3] = "noVerification" 
heading[4] = "TargetImagelocation" 
heading[5] = "Username" 
heading[6] = "Password" 
heading[7] = "Target IP" 

var imageInfo = new Array() 
imageInfo[0] = new Array(imageName, "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151") 
imageInfo[1] = new Array("win2008", "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151") 



//TABLE COLUMNS 
var tr = document.createElement('TR'); 
tableBody.appendChild(tr); 
for (i = 0; i < heading.length; i++) { 
    var th = document.createElement('TH') 
    th.width = '75'; 
    th.appendChild(document.createTextNode(heading[i])); 
    tr.appendChild(th); 
} 

//TABLE ROWS 
for (i = 0; i < imageInfo.length; i++) { 
    var tr = document.createElement('TR'); 
    for (j = 0; j < imageInfo[i].length; j++) { 
     var td = document.createElement('TD') 
     td.appendChild(document.createTextNode(imageInfo[i][j])); 
     tr.appendChild(td) 
    } 
    tableBody.appendChild(tr); 
} 
myTableDiv.appendChild(table) 
} 

function addRow() { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 



     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name="chkbox[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount + 1; 

     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     element2.name = "txtbox[]"; 
     cell3.appendChild(element2); 

    } 

function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 


</SCRIPT>

來源

2016-01-18 Dina

什麼是你的代碼不完全是？你看到控制檯中有任何錯誤嗎？我個人不會使用內聯Javascript，並將CSS，HTML和Javascript分離到他們自己的文件中，同時參見[unobtrusive Javascript]（https://en.wikipedia.org/wiki/Unobtrusive_JavaScript）。我通常只使用庫，如果它們實際上是必要的，就像特定的（較舊的）瀏覽器支持一樣，但它依賴於許多事情。 HTML'id's也應該是唯一的。 – Xotic750

@ Xotic750 - 我不確定你不清楚什麼？具體而言，如上所述，ADD和DELETE行函數不起作用:-( – Dina

具體而言，Add或Delete是否在點擊時觸發其偵聽器，處理程序是否執行，控制檯中是否有任何可見錯誤，預期的行爲是什麼當與實際行爲相比時，我並不是說「它不起作用」 – Xotic750

你不設置任何id到要創建onload表 - 所以，當你以後來人來電getElementById()內addRow它不能被發現（而你使用不存在的變量 - ！tableID）

我的建議是採取一種id作爲參數來addTable，並設置爲動態生成的表的id：

function addTable(id) { 
    var myTableDiv = document.getElementById("metric_results") 
    var table = document.createElement('TABLE') 
    table.id = id; 
    ....

onload，通過somethig明智 - default也許：

window.onload = function(){ 
    addTable("default"); 
}

，要麼通過這個添加一行時，也可以使用上面提供的默認：

function addRow() { 
    var table = document.getElementById("default"); 
    ....

或

function addRow(id) { 
    var table = document.getElementById(id);

更新小提琴：https://jsfiddle.net/egtu5kay/5/

左作爲一個練習您：按照您的意願正確設置新行的格式。

來源

2016-01-18 11:16:26 Jamiec

JavaScript dyanmic表添加/刪除行

回答

相關問題