CODEWITHSUNDEEP
javascripthtmldrop-down-menuhtml-table
Yvonne Marggraf
Yvonne Marggraf

Reputation: 408

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. 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.

Upvotes: 2

Views: 29774

Answers (3)

CDelaney
CDelaney

Reputation: 1248

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>

Upvotes: 0

thommylue
thommylue

Reputation: 170

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>

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

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>

DEMO FIDDLE

Upvotes: 2

Related Questions