【发布时间】：2016-05-13 01:01:42
【问题描述】：
我已经让它为输入工作了，现在我认为这只是我没有注意到的愚蠢错误。
我的脚本如下所示：
<script type="text/javascript">
$(document).ready(function () {
$('#clicker').on('click', function (e) {
var tableToObj = function (table) {
var trs = table.rows,
trl = trs.length,
i = 0,
j = 0,
keys = [],
obj, ret = [];
for (; i < trl; i++) {
if (i == 0) {
for (; j < trs[i].children.length; j++) {
var sel = $(trs[i].children[j]).find("select");
if (sel.length == 0) {
keys.push(trs[i].children[j].innerHTML);
} else {
keys.push(sel.find('option:selected').val()); //all select works perfectly
}
var input = $(trs[i].children[j]).find("input"); //here I'm trying to find the input. This is where it stops working
if (input.length == 0) {
keys.push(trs[i].children[j].innerHTML);
} else {
keys.push(trs[i].childen[j].innerHTML);
}
}
} else {
obj = {};
for (j = 0; j < trs[i].children.length; j++) { //this works
var sel = $(trs[i].children[j]).find("select");
if (sel.length == 0) {
obj[keys[j]] = trs[i].children[j].innerHTML;
} else {
obj[keys[j]] = sel.find('option:selected').val();
}
var input = trs.getElementsByTagName("input"); //below does not work
if (input.length == 0) {
obj[keys[j]] = trs[i].children[j].innerHTML;
} else {
obj[keys[j]] = input.find('text').val();
}
/*
for (j < input.length; j++) {
data.push(input[j].id);
}
*/
}
ret.push(obj);
}
}
return ret;
};
document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable')));
});
});
这里是不太相关的 HTML：（包括在内只是为了看看我从哪里拉）
<table id="myTable">
<thead>
<tr>
<th>FirstColumn</th>
<th>SecondColumn</th>
<th>ThirdColumn</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
<td>1</td>
<td>
<select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
</tr>
<tr>
<td></td>
<td>
</td>
<td>
<select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" />
</td>
<td>
<select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
</tr>
<tr>
<td>
<input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>
<select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
</tr>
</tbody>
</table>
编辑：从 trs[i] 开始，我就在它应该在的地方
【问题讨论】：
-
您使用了很多
inputs 和selects，您有form作为父母吗？如果是，为什么不使用默认的 jqery 序列化程序呢？喜欢$('myForm').serialize() -
这里的
#clicker元素是什么？ -
为什么不使用
.getElementsByTagName('td')，循环并使用.children[0]引用您的输入，因为它们都是您在各自父元素中的第一个元素（也恰好是td）？然后，您可以使用子元素的.tagName来确定要执行哪个子例程以提取数据。无论子元素在哪里，从那里弄清楚如何使它工作都是微不足道的。您可以简单地执行另一个.getElementsByTagName('*')并在.tagName上使用 switch 语句循环。 -
我漏掉了，对不起！ #Clicker 是按钮
-
Patrick，我的实际页面中有一个表格。这只是显示问题的摘录
标签： javascript jquery html json