如何在表格中添加下拉列表？
[英]How can I add a drop down list in a table?
问题描述
Following situation: 
以下情况：
I'm programming a web-app, which get data from a server. 我正在编写一个从服务器获取数据的Web应用程序。 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的新手，在网上搜索没有帮助。
3 个解决方案
解决方案1
2 已采纳 2015-10-02 12:59:22
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>
解决方案2
1 2015-10-02 12:58:55
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>
解决方案3
0 2015-10-02 13:45:51
You need to close your body element with a > so it looks like this: <body> . 你需要用>关闭你的body元素，所以它看起来像这样： <body> 。 That's all you need. 这就是你所需要的。
Also, if you want it to be an actual dropdown (right now it's a selectbox), remove the size attribute from the select tag. 此外，如果您希望它是实际下拉列表（现在它是一个选择框），请从select标记中删除size属性。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.