如何使用JavaScript向具有未指定行数的表添加新列

Question

我正在尝试创建一个表，允许您添加一列，该列将与新添加的列中的现有行匹配。

我只是将必要的HTML附加到帖子中。

<table id="main">
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <tr class="alt" id="row">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
</table>
<input type="button" value="Add New Row" onclick="addRow();" id="rowButton" />
<input type="button" value="Add New Column" onclick="addColumn();" />

和JavaScript

function addRow() {
    var table = document.getElementById("main");
    var row = table.insertRow(7);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell2.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell3.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell4.innerHTML = '<input type="text" placeholder="Enter Value">';
}

function addColumn() {
    var table = document.getElementById("row");
    var x = table.insertCell(-1);
    x.innerHTML = '<input type="text" placeholder="Enter Value">';
}

Answer 1

这应该这样做：

function myFunction() {
    var rows = document.getElementsByClassName("myRow");
    for(var i = 0; i < rows.length; i++){
       var x = rows[i].insertCell(-1);
       x.innerHTML = "New cell";
    }
}

问题是你只使用了来自1行的ID标记，你真正需要一个可以识别每一行的类名。

这是一个有效的代码：

http://codepen.io/anon/pen/aOgZrE

Answer 2

我在代码中添加了动态行和列代码。

表对象的行或者为var rows = table.rows;，你可以找到它的单元格或tds为var cols = table.rows[xxx].cells;

function addRow() {
    var table = document.getElementById("main");
	var rws = table.rows;
	var cols = table.rows[0].cells.length;
    var row = table.insertRow(rws.length);
	var cell;
	for(var i=0;i<cols;i++){
		cell = row.insertCell(i);
		cell.innerHTML = '<input type="text" placeholder="Enter Value">';
	}
}

function addColumn() {
    var table = document.getElementById("main");
	var rws = table.rows;
	var cols = table.rows[0].cells.length;
	var cell;
	for(var i=0;i<rws.length;i++){
		cell = rws[i].insertCell(cols-1);
		cell.innerHTML = '<input type="text" placeholder="Enter Value">';
	}
}

<table id="main">
    <tr>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
    </tr>
    <tr class="alt" id="row">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
</table>
<input type="button" value="Add New Row" onclick="addRow();" id="rowButton" />
<input type="button" value="Add New Column" onclick="addColumn();" />