javascript动态表添加/删除行

我正在尝试构建一个表单，用于创建映像部署列表

我能够在表单加载时创建一个动态表，还可以收集每个值的数据，但似乎可以使添加和删除工作正常。 我的问题:

我必须在代码中执行（或更改）什么操作才能使添加和删除选项正常工作，并以CSV格式导出表数据

请有人帮助和/或指导我，因为我迷路了，真的很想有一个工作的例子。。网上的东西太多了，一切都结束了 我访问过的最新地方是Mozilla DOM帮助页面，令人困惑的是如何将自己的变量加载到表中

作为参考，我使用了stackoverflow和google，最后

这是我的密码：

<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>   

输入目标名称：


window.onload=addTable//窗口加载时的加载表
函数addTable（）{
var myTableDiv=document.getElementById（“度量结果”）
var table=document.createElement（'表'）
var tableBody=document.createElement（'TBODY'）
var imageName=textbox1.value
table.border='1'
table.appendChild（表体）；
var heading=新数组（）；
标题[0]=“imageName”
标题[1]=“可接受性”
标题[2]=“无需验证”
标题[3]=“未验证”
标题[4]=“TargetImagelocation”
标题[5]=“用户名”
标题[6]=“密码”
标题[7]=“目标IP”
var imageInfo=新数组（）
imageInfo[0]=新数组（imageName，“AcceptableLula”、“noSSLverify”、“noVerification”、“testLocation”、“user”、“pass”、“192.168.1.151”）
imageInfo[1]=新数组（“win2008”、“Acceptableula”、“noSSLverify”、“noVerification”、“testLocation”、“user”、“pass”、“192.168.1.151”）
//表列
var tr=document.createElement（'tr'）；
tableBody.appendChild（tr）；
对于（i=0；i对于（var i=0；i您没有将任何
id
设置到您正在创建的
onload
表中-因此，当您稍后在
addRow
内调用
getElementById（）
时，无法找到它（并且您使用的变量不存在-
tableID
）

我的建议是将
id
作为
addTable
的参数，并将其设置为动态生成表的
id
：

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

onload
，传递一些合理的-
默认值
可能：

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

并在添加行时传入，或使用上面提供的默认值：

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

或

更新小提琴：

留给您一个练习：按照您的意愿正确格式化新行。
您的代码没有完全做到什么？您在控制台中看到任何错误吗？我个人不会使用内嵌Javascript，并且会将CSS、HTML和Javascript分离到各自的文件中，也请参见。我通常只在实际需要时使用库y、 类似于特定的（旧的）浏览器支持，但这取决于许多方面。HTML
id
s也应该是唯一的。@Xotic750-我不确定您不清楚什么？特别是，如上所述，添加和删除行功能不起作用：-（特别是，添加或删除是否会在单击时触发其侦听器，处理程序是否执行，控制台中是否存在任何可见错误，与实际行为相比，预期的行为是什么？我不是说“它不工作”.jsfiddle的链接将对我们有很大帮助…如前所述，添加和删除行功能不起作用。两周来，我一直在尝试从我使用HTML创建的简单表单中构建一个表，并最终将该表导出到csv。我有我想要的google文档和许多调查网站。我在表单中有一组问题，需要用户要能够回答问题，请单击“添加”按钮，该按钮将把答案加载到表中的一行中。他们还需要能够删除选定的行。提交按钮将把最终的表值提交到CSV文件中。
function addRow(id) {
  var table = document.getElementById(id);