我已经有了它的输入工作,现在我认为这只是我没有注意到的愚蠢的错误。如何获取动态表格输入进入数组?
我的剧本是这样的:
<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 [我]在它的意思是
你用了很多'input's和'select's的,你有一个'form'作为家长吗?如果是的话,为什么你不使用默认的jqery序列化程序呢?像'$('myForm')。serialize()' –
这里是什么#clicker'元素? –
为什么不使用'.getElementsByTagName('td')',通过循环并使用'.children [0]'引用您的输入,因为它们都是您的各自父元素中的所有第一个元素(它们也恰好是td) ?然后,您可以使用子元素的'.tagName'来确定要提取数据的子程序。从那里弄清楚如何使它工作,无论子元素在哪里都是微不足道的。你可以简单地做另一个'.getElementsByTagName('*')'并用'.tagName'上的switch语句循环。 –