在表格单元格中选择Javascript
[英]Javascript select in table cell
问题描述
I want to add a select (dropdown) to every row in my table. 
我想向表中的每一行添加一个选择（下拉）。 The table is created using Javascript and has dynamic content imported from xml files using JQuery. 该表是使用Javascript创建的，并具有使用JQuery从xml文件导入的动态内容。 I managed to import all content successfully, however the dropdowns are displayed in the last row only. 我设法成功导入了所有内容，但是下拉列表仅显示在最后一行。 I would appreciate if you can assist me to have the dropdown in every row. 如果您能协助我在每一行中添加下拉菜单，我们将不胜感激。
Below is a code extract with blank selects only (the imported content is stored in those elements). 以下是仅具有空白选择的代码摘录（导入的内容存储在这些元素中）。 All outputs such as "row " is for testing purpose only. 所有输出（例如“ row”）仅用于测试目的。 "Numrows" are for testing purpose as well. “数字”也用于测试目的。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" >
<title>table select test</title>
</head>
<body>
<table id="scrolltable">
</table>
<script type="text/javascript">
var tabbody = document.getElementById("scrolltable");
var types = document.createElement("select");
var units = document.createElement("select");
parseTable(3, types, "row ", units);
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
</script>
</body>
</html>
2 个解决方案
解决方案1
1 2014-09-01 13:41:32
types and units are defined once, so they are single elements. types和units定义一次，因此它们是单个元素。 So they are moved to where you last called appendChild. 因此，它们被移至您上次调用appendChild的位置。 If you want to see what happens, try adding alert(''); 如果要查看会发生什么，请尝试添加alert(''); before ending your for loop and see it in action for every row. 在结束for循环之前，请查看每一行的实际效果。
If you want to add it in every row then you need new instances at each itterration: 如果要在每一行中添加它，那么您需要在每个发射率处添加新实例：
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
types = document.createElement("select");
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
units = document.createElement("select");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
解决方案2
0 已采纳 2014-09-01 13:41:30
Without a minimum example, it may be difficult to pinpoint the issue, but my guess is: 没有最小的例子，可能很难查明问题，但我的猜测是：
You create the types and units elements only before your loop, so you are appending the same objects over and over, and each time you append one of them to a cell, you take it from the original cell and put it into the new one. 您仅在循环之前创建type和unit元素，因此要一遍又一遍地添加相同的对象，并且每次将其中一个添加到单元格时，都将其从原始单元格中取出并放入新单元格中。 Thats what "appendChild" does, it doesn't clone the element, it uses the same one ( http://www.w3schools.com/jsref/met_node_appendchild.asp ). 这就是“ appendChild”的作用，它不会克隆元素，它使用相同的元素（ http://www.w3schools.com/jsref/met_node_appendchild.asp ）。
If you create a new select element in every step of your for, you should be fine =) 如果您在for的每一步中都创建了一个新的select元素，则应该没问题=）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.