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.
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.
Share Improve this question edited Jan 8, 2018 at 9:13 Yvonne Marggraf asked Oct 2, 2015 at 12:54 Yvonne MarggrafYvonne Marggraf 4082 gold badges6 silver badges20 bronze badges 6-
What function? I don't see any function to create the drop down menu. You are also missing a closing tag
</script>and have an unfinished body tag<body. – gre_gor Commented Oct 2, 2015 at 13:10 - my code are more thann 400 lines long, because I have also many other functions. I'm sorry for miss these two. In my code they are correct – Yvonne Marggraf Commented Oct 2, 2015 at 13:16
- I tried many things out. Has anybody an idea how I can fill the cell2 with the drop down menu? I think this is my main problem – Yvonne Marggraf Commented Oct 2, 2015 at 13:27
-
If you want help with a function that creates a dropdown into a table cell, you will need to include that function into the question. Or is that what
readCustomerSuccessCallbackis supposed to be doing? Because it just adds table rows, where the second column is a link that calls a function on click. – gre_gor Commented Oct 2, 2015 at 13:58 - Such as you said. the table is created in the <body> and the funktion readCustomerSuccessCallback ad for each Customer one row. In each row should be in the first column the name, and ich the second a drop down list. Its quite difficult to let the function this do – Yvonne Marggraf Commented Oct 5, 2015 at 7:43
3 Answers
Reset to default 2you 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>
DEMO FIDDLE
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>
You need to close your body element with a > so it looks like this: <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.
<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>