使用javascript创建2个html表_Javascript_Html_Css

使用javascript创建2个html表

javascript html css

使用javascript创建2个html表,javascript,html,css,Javascript,Html,Css,我正在尝试使用Javascript和html输入的数据创建两个动态html表。我能够创建我想要的第一个表，但是我无法在同一页上使用不同的输入创建两个不同的表我尝试将html和JS中的addRow函数更改为具有不同的名称，但这导致两个表都失败任何帮助都将不胜感激。这是我一直在使用的测试代码 <!DOCTYPE html> <body onload="load()"> <div id="myform"> <table> <

我正在尝试使用Javascript和html输入的数据创建两个动态html表。我能够创建我想要的第一个表，但是我无法在同一页上使用不同的输入创建两个不同的表

我尝试将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");
}

看起来在底部部分，您没有使用定义的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;

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

你不是想在addRow的最后3行中使用第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];
    } 
}