Question

我正在尝试构建一个用于创建图像部署列表的表单。

Image example of my table

我能够在表单加载上创建动态表，并且还可以收集每个值的数据，但似乎可以使Add和Delete工作。我的问题：

我必须在代码中执行（或更改）以使ADD和Delete选项正常工作并以CSV格式导出表格数据。

请有人帮忙和/或指导我，因为我迷路了，真的想要一个有效的例子......网上有太多的东西它超负荷我访问过的最新地方是Mozilla DOM帮助页面，如何将自己的变量加载到表中会让人感到困惑

作为参考，我使用了stackoverflow和google以及最后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>

Answer 1

您没有在正在创建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，传递一些明智的事 - 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/

留给您作为练习：正确格式化新行。

javascript dyanmic表添加/删除行

1 个答案: