如何获取动态表输入以放入数组? [英] How can I get dynamic table inputs to go into array?
本文介绍了如何获取动态表输入以放入数组?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经将它用于输入，现在我认为这只是我没有注意到的愚蠢错误.
I already have it working for the inputs, now I think it's just stupid errors that I've failed to notice.
我的脚本如下:
<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 :(仅用于查看我从中提取的内容)
Here's the less relevant HTML: (included just to see where I'm pulling from)
<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]开始，我就应该在其中
I have since trs[i] in where it was meant to be
推荐答案
您正尝试在元素数组上使用getElementByTagName，因此您应该在var input = trs[i].getElementsByTagName("input");中使用index而不是在进行var input = trs.getElementsByTagName("input");
You were trying to use getElementByTagNameon array of elements and hence you should have used index in var input = trs[i].getElementsByTagName("input"); instead you were doing var input = trs.getElementsByTagName("input");
旁注-请不要将javascript和jquery结合使用.包含插件后，请也使用其功能.
A side note - Please do not combine javascript and jquery. When you have plugin included, please use its features too.
$(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[i].getElementsByTagName("input"); //below does not work
if (input.length == 0) {
obj[keys[j]] = trs[i].children[j].innerHTML;
} else {
obj[keys[j]] = input.value;
}
}
ret.push(obj);
}
}
return ret;
};
document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable')));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<input type="button" id="clicker" value="click" />
<div id="r">
</div>
这篇关于如何获取动态表输入以放入数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
