Question

我正在尝试使用Javascript创建2个动态html表，其中包含来自html输入的数据。我能够创建我想要的第一个表，但是我无法在同一页面上使用不同的输入创建2个不同的表。

我尝试更改html和JS中的addRow()函数以使用不同的名称，但这会导致两个表都失败。

任何帮助将不胜感激。这是我一直在使用的测试代码。

    <!DOCTYPE html>

<body onload="load()">
<div id="myform">

<table>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="name"></td>
      </tr>
    <tr>
        <td>Age:</td>
        <td><input type="number" id="age">
            <input type="button" id="add" value="Add" onclick="addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<br>
<table>
    <tr>
        <td>Height:</td>
        <td><input type="text" id="height"></td>
    </tr>
    <tr>
        <td>Width:</td>
        <td><input type="text" id="width">
            <input type="button" id="addDim" value="Add" onclick="addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</div>
<div id="mydata">

<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Name</b></td>
        <td><b>Age</b></td>
    </tr>
</table>
&nbsp;

<table id="myTableData2"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Height</b></td>
        <td><b>Width</b></td>
    </tr>
</table>


</body>
</html>



function addRow() {

    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    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.value;
    row.insertCell(2).innerHTML= age.value;

    var width = document.getElementById("width");
    var height = document.getElementById("height");
    var table2 = document.getElementById("myTableData2");

    var rowCount2 = table2.rows.length;
    var row2 = table2.insertRow(rowCount2);

    row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
    row.insertCell(1).innerHTML = width.value;
    row.insertCell(2).innerHTML = height.value;

}

function deleteRow(obj) {
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
}

function load() {
    console.log("Page load finished");
}

Answer 1

在底部看起来，您没有使用已定义的row2变量。

应该是：

var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);

row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;

Answer 2

这里我是怎么做到的。如果在函数中传递参数，则可以对任意数量的表使用相同的函数。

http://jsfiddle.net/8t5aqomk/2/

function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;

var info = [firstName,lastName,age]

var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length; 

for(var i=0; i<cellCount; i++) {
    row.insertCell(i).innerHTML=info[i];
    } 
}

使用javascript创建2个html表

2 个答案: