如何使用JavaScript向行数未指定的表中添加新列
How to add a new column to a table with an unspecified amount of rows with JavaScript
我正在尝试创建一个表，允许您添加一个列，该列将与新添加的列中的现有行数量相匹配。
我只将必要的HTML附加到post.
<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">';
}
我在您的代码中添加了动态行和列代码。
表对象将其行或trs设置为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();" />应该这样做:
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相关文章：
- 添加新数据时D3.JS条形图列偏移量
- 流星:显示数组数据，因为表在添加新列时给出了重复值
- JavaScript-为什么当我向表中添加新列时，它会说“;未定义的“;在额外的细胞中
- 在 JavaScript 数组中添加新列
- 当我单击添加新列按钮时，表单会自动提交
- 如何在 jqgrid 中添加新的按钮/图像列
- 将新列添加到ag网格
- 如何添加新行/列
- 在列之间添加新列
- 向HTML表中添加具有特定ng-model的新列
- 向表主体和表头添加新列
- 向表中添加新列时，用默认单元格填充当前行
- 使用displaytag在表(网格)中添加新列
- 在指定的列数之后添加新的行
- 如何使用JavaScript向行数未指定的表中添加新列
- 添加新的列/属性以序列化模型
- 是否有可能通过添加额外的标题选项来显示在ag-grid中添加新列的引导模型?
- 如何在具有预定义属性的表中添加新行和列
- JQuery-在列中搜索，当文本更改时添加新行
- 将新列添加到没有表id的HTML表中
