Como posso adicionar uma lista abaixo em uma tabela?
seguinte situação:
Estou a programar uma aplicação web, que obtém dados de um servidor. Quero colocar esses dados em uma tabela com duas colunas. Na primeira coluna deve haver um nome e na segunda coluna deve haver uma lista para escolher Que informações detalhadas eu quero obter sobre o nome na primeira coluna.o meu código:
<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>
o meu problema é que a função não cria a lista na segunda coluna. Sou novo em html e Javascript e procurar na web não ajudaram.
1
Author: Yvonne.J.M, 2015-10-02
3 answers
Pode tentar este.
<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>
1
Author: Ivin Raj, 2015-10-02 12:59:22
Basta abrir o formulário antes da tabela abrir, e fechar o formulário após a etiqueta.
Assim:<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>
1
Author: thommylue, 2015-10-02 13:13:47
Tens de fechar o teu elemento body
com um >
para que se pareça com isto: <body>
. É tudo o que precisas.
Também, se quiser que seja uma lista actual (neste momento é uma selectbox), remova o atributo size
da marca 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>
0
Author: CDelaney, 2015-10-02 18:27:17