JavaScript将数据从文本字段的动态表读取到数组中
我正在使用HTML表和附加到按钮单击的JavaScript函数动态创建一个表。现在，我想使用另一个名为finished的按钮将数据存储到多维数组中。我甚至在开始使用将其保存到数组中的最后一种方法时都遇到了问题。我不知道如何检索文本数据 这是我当前的HTML代码JavaScript将数据从文本字段的动态表读取到数组中,javascript,html,arrays,dynamic,html-table,Javascript,Html,Arrays,Dynamic,Html Table,我正在使用HTML表和附加到按钮单击的JavaScript函数动态创建一个表。现在，我想使用另一个名为finished的按钮将数据存储到多维数组中。我甚至在开始使用将其保存到数组中的最后一种方法时都遇到了问题。我不知道如何检索文本数据 这是我当前的HTML代码 <head> <title>TableTest</title> <script src="/javascript/func.js"></script> </
<head>
<title>TableTest</title>
<script src="/javascript/func.js"></script>
</head>
<body>
<form>
<div id="Input">
<INPUT class="form-button" id="AddRow" type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT class="form-button" id="DeleteRow" type="button" value="Delete Row(s)" onclick="deleteRow('dataTable')" />
<INPUT class="form-button" id="Finished" type="button" value="Finished" onclick="gatherData('dataTable')" />
<table id="dataTable" border="1" style="width:200px" id="mytable" align="center" cellspacing="3" cellpadding="4">
<th>Select</th>
<th>Text1</th>
<th>Text2</th>
<th>Text3</th>
<tr>
<td><INPUT type="checkbox" name="chk"/></td>
<td><INPUT type="text" name="text1"/></td>
<td><INPUT type="text" name="txt2"/></td>
<td><INPUT type="text" name="txt3"/></td>
</tr>
</table>
</div>
</form>
</body>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
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) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function gatherData(){
//Tests
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
alert(rowCount);
alert(row);
alert(colCount);
}
我试图保持它的简单，也可以说jQuery是干净的
var data = [];
function gatherData() {
var table = document.getElementById('dataTable');
for (r = 1; r < table.rows.length; r++) {
var row = table.rows[r];
var cells = row.cells;
for (c = 0; c < cells.length; c++) {
var cell = cells[c];
var inputElem = cell.children[0];
var isInput = inputElem instanceof HTMLInputElement;
if (!isInput)
return;
var value = inputElem.value;
var isCheckbox = inputElem.getAttribute('type') == 'checkbox';
if (isCheckbox)
value = inputElem.checked;
var rowData = {};
rowData.inputType = inputElem.getAttribute('type');
rowData.inputValue = value;
data.push(rowData);
}
}
}
function startExec() {
gatherData();
for (i = 0; i < data.length; i++) {
console.log(data[i].inputType);
console.log(data[i].inputValue);
}
}
//just wait for the dom to load, and then execute the function for testing
document.addEventListener("DOMContentLoaded", startExec, false);
function getData() {
var table = document.getElementById('dataTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var data = [];
for (l = 0; l < table.rows[0].cells.length; l++) {
data.push({
items: [],
name: "ColumnNumber" + l
});
}
for (i = 1; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
for (c = 0; c < cells.length; c++) {
var inputElem = cells[c].children[0];
data[c].items.push({
inputType: inputElem.getAttribute('type'),
inputValue: inputElem.value
});
}
}
printData(data);
}
function printData(data) {
for (i = 0; i < data.length; i++) {
for (k = 0; k < data[i].items.length; k++) {
console.log(data[i].items[k].inputValue);
}
}
}
document.addEventListener("DOMContentLoaded", getData(), false);
很好，你开始自己做表操作，我建议你继续，如果你想达到一个更大的代码库，我建议你去看看。即使它是一个jQuery插件，您仍然可以通过查看代码结构来了解一些东西，这些代码结构用于处理围绕根据数据集构建表和添加记录等的所有逻辑。我试图保持它的简单，也可以说jQuery是干净的
var data = [];
function gatherData() {
var table = document.getElementById('dataTable');
for (r = 1; r < table.rows.length; r++) {
var row = table.rows[r];
var cells = row.cells;
for (c = 0; c < cells.length; c++) {
var cell = cells[c];
var inputElem = cell.children[0];
var isInput = inputElem instanceof HTMLInputElement;
if (!isInput)
return;
var value = inputElem.value;
var isCheckbox = inputElem.getAttribute('type') == 'checkbox';
if (isCheckbox)
value = inputElem.checked;
var rowData = {};
rowData.inputType = inputElem.getAttribute('type');
rowData.inputValue = value;
data.push(rowData);
}
}
}
function startExec() {
gatherData();
for (i = 0; i < data.length; i++) {
console.log(data[i].inputType);
console.log(data[i].inputValue);
}
}
//just wait for the dom to load, and then execute the function for testing
document.addEventListener("DOMContentLoaded", startExec, false);
function getData() {
var table = document.getElementById('dataTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var data = [];
for (l = 0; l < table.rows[0].cells.length; l++) {
data.push({
items: [],
name: "ColumnNumber" + l
});
}
for (i = 1; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
for (c = 0; c < cells.length; c++) {
var inputElem = cells[c].children[0];
data[c].items.push({
inputType: inputElem.getAttribute('type'),
inputValue: inputElem.value
});
}
}
printData(data);
}
function printData(data) {
for (i = 0; i < data.length; i++) {
for (k = 0; k < data[i].items.length; k++) {
console.log(data[i].items[k].inputValue);
}
}
}
document.addEventListener("DOMContentLoaded", getData(), false);
很好，你开始自己做表操作，我建议你继续，如果你想达到一个更大的代码库，我建议你去看看。即使它是一个jQuery插件，您仍然可以通过查看代码结构来了解一些东西，这些代码结构用于处理围绕根据数据集构建表和添加记录等的所有逻辑。这就是您要寻找的吗
这就是你要找的吗
我修改了TameBadger的答案，以按行而不是按列构建数组。我还添加了一个检查，以查看给定单元格在引用之前是否有值。在我的例子中，并不是所有的单元格都有值
var table = document.getElementById('mainTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var tblData = [];
//Put a RowNumber name and values placeholder for the number of rows we have.
for (r = 0; r < table.rows.length; r++)
{
//Debug
//console.log(" row: ", r);
tblData.push({
name: "RowNumber" + r,
items: []
});
//Get the cells for this row.
var cells = table.rows[r].cells;
//Loop through each column for this row and push the value...
for (c = 0; c < cells.length; c++)
{
var inputElem = cells[c].children[0];
var tmpInputElem;
if (inputElem == null)
{
tmpInputElem = "";
}
else
{
tmpInputElem = inputElem.value
}
//Debug
//console.log(" row-cel: ", r, "-", c, " ", inputElem);
tblData[r].items.push(
{
//Comment out the type for now...
//inputType: inputElem.getAttribute('type'),
inputValue: tmpInputElem
});
}
}
//Debug
//printData(tblData);
我修改了TameBadger的答案，以按行而不是按列构建数组。我还添加了一个检查，以查看给定单元格在引用之前是否有值。在我的例子中，并不是所有的单元格都有值
var table = document.getElementById('mainTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var tblData = [];
//Put a RowNumber name and values placeholder for the number of rows we have.
for (r = 0; r < table.rows.length; r++)
{
//Debug
//console.log(" row: ", r);
tblData.push({
name: "RowNumber" + r,
items: []
});
//Get the cells for this row.
var cells = table.rows[r].cells;
//Loop through each column for this row and push the value...
for (c = 0; c < cells.length; c++)
{
var inputElem = cells[c].children[0];
var tmpInputElem;
if (inputElem == null)
{
tmpInputElem = "";
}
else
{
tmpInputElem = inputElem.value
}
//Debug
//console.log(" row-cel: ", r, "-", c, " ", inputElem);
tblData[r].items.push(
{
//Comment out the type for now...
//inputType: inputElem.getAttribute('type'),
inputValue: tmpInputElem
});
}
}
//Debug
//printData(tblData);
要收集数据，您不想插入新行，只需像deleteRow函数中那样迭代存在的行，然后为每个单元格收集一个适当的值，如textConent或innerText，或form control value（如果选中），等等。要收集数据，您不想插入新行，只需迭代deleteRow函数中的行，然后为每个单元格收集一个适当的值，比如textConent或innerText，或者表单控件值（如果选中），等等。很抱歉，这是JQuery版本！抱歉，这是JQuery版本！感谢您的帮助，我一直计划研究jTable，但我想先对它有一个更好的了解。我还有一个问题要问你。我使用复选框只是为了删除行。如果选中该复选框，我不想将数据存储在其中。我如何传递这些值？？还可以将数据存储到单独的阵列中吗？例如，text1列[]、text2Column[]、text3Column[]，或所有数据[text1Column][text2Column][text3Column]。再次感谢您的帮助。因此，您希望将一列的所有文本存储在一个数组中，因此假设您有三行，这些值位于单元格中，1 2 3，1 2 3，1 2 3。然后你想要数组text1列[1,1,1]和text2column[2,2,2]等等？好的，在你的请求中添加了另一个修订版，最好只添加一个case语句来处理每种类型的输入标记。感谢你的帮助，我一直计划查看jTable，但我想先对它有一个更好的理解。我还有一个问题要问你。我使用复选框只是为了删除行。如果选中该复选框，我不想将数据存储在其中。我如何传递这些值？？还可以将数据存储到单独的阵列中吗？例如，text1列[]、text2Column[]、text3Column[]，或所有数据[text1Column][text2Column][text3Column]。再次感谢您的帮助。因此，您希望将一列的所有文本存储在一个数组中，因此假设您有三行，这些值位于单元格中，1 2 3，1 2 3，1 2 3。那么您希望数组text1列[1,1,1]和text2column[2,2,2]等等？好的，添加了另一个修订版，根据您的请求，最好只添加一个case语句来处理每种类型的输入标记。