javascript 如何在表格中添加下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32907642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a drop down list in a table?
提问by Yvonne Marggraf
Following situation:
以下情况：
I'm programming a web-app, which get data from a server. I want to put these data in an table with two columns. In the first column there should be a name and in the second column should be a drop down list to choose which detailed information I want to get about the name in the first column.
我正在编写一个网络应用程序，它从服务器获取数据。我想把这些数据放在一个有两列的表中。在第一列中应该有一个名称，在第二列中应该有一个下拉列表，用于选择我想获得关于第一列中名称的哪些详细信息。
My code:
我的代码：
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="datajs-1.0.2.min.js"></script>
<script type="text/javascript">
function readCustomerSuccessCallback(data, response) {
var customerTable = document.getElementById("CustomerTable");
for (var i = 0; i < data.results.length; i++) {
var row = customerTable.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1 = "data.results[i].CUSTOMER_NAME";
cell2.innerHTML = '<a href="javascript:void(0);" onclick="readProducts(' + data.results[i].STATION_ID + ')">' + data.results[i].CUSTOMER_NAME + '</a>';
}
}
</head>
<body>
<table id="CustomerTable">
<thead>
<tr>
<th>Customer</th>
<th>Filter the Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXAMPLE</td>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for" size="5">
<option value="Druck">Druck</option>
<option value="Zahl">Zahl</option>
<option value="Temperatur">Temperatur</option>
<option value="Drehzahl">Drehzahl</option>
<option value="andere">andere</option>
</select>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
My Problem is, that the function does not create the drop down list in the second column. I'm new with html and Javascript and searching in the web didn't help.
我的问题是，该函数不会在第二列中创建下拉列表。我是 html 和 Javascript 的新手，在网上搜索没有帮助。
回答by Ivin Raj
you can try this one:
你可以试试这个：
<body
<table id="CustomerTable">
<thead>
<tr>
<th>Customer</th>
<th>Filter the Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXAMPLE</td>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for" >
<option value="Druck">Druck</option>
<option value="Zahl">Zahl</option>
<option value="Temperatur">Temperatur</option>
<option value="Drehzahl">Drehzahl</option>
<option value="andere">andere</option>
</select>
</form>
</td>
</tr>
</tbody>
</table>
</body>
回答by thommylue
Just open the form before the table opens, and close the form after the tag.
只需在表格打开之前打开表格，并在标签之后关闭表格。
Just like this:
像这样：
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="datajs-1.0.2.min.js"></script>
<script type="text/javascript">
function readCustomerSuccessCallback(data, response) {
var customerTable = document.getElementById("CustomerTable");
for (var i = 0; i < data.results.length; i++) {
var row = customerTable.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1 = "data.results[i].CUSTOMER_NAME";
cell2.innerHTML = '<a href="javascript:void(0);" onclick="readProducts(' + data.results[i].STATION_ID + ')">' + data.results[i].CUSTOMER_NAME + '</a>';
}
}
</script>
</head>
<body>
<form action="" name="FILTER">
<table id="CustomerTable">
<thead>
<tr>
<th>Customer</th>
<th>Filter the Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXAMPLE</td>
<td class="dropdown">
<select name="filter_for" size="5">
<option value="Druck">Druck</option>
<option value="Zahl">Zahl</option>
<option value="Temperatur">Temperatur</option>
<option value="Drehzahl">Drehzahl</option>
<option value="andere">andere</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
回答by CDelaney
You need to close your bodyelement with a >so it looks like this: <body>. That's all you need.
您需要关闭body一个元素>，所以它看起来是这样的：<body>。这就是你所需要的。
Also, if you want it to be an actual dropdown (right now it's a selectbox), remove the sizeattribute from the selecttag.
此外，如果您希望它是一个实际的下拉列表（现在它是一个选择框），请size从select标签中删除该属性。
<body>
<table id="CustomerTable">
<thead>
<tr>
<th>Customer</th>
<th>Filter the Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXAMPLE</td>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for" size="5">
<option value="Druck">Druck</option>
<option value="Zahl">Zahl</option>
<option value="Temperatur">Temperatur</option>
<option value="Drehzahl">Drehzahl</option>
<option value="andere">andere</option>
</select>
</form>
</td>
</tr>
</tbody>
</table>
</body>