Question

以下情况：

我正在编写一个从服务器获取数据的Web应用程序。我想将这些数据放在一个包含两列的表中。在第一列中应该有一个名称，在第二列中应该是一个下拉列表，以选择我想要在第一列中获取有关名称的详细信息。

我的代码：

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

我的问题是，该函数不会在第二列中创建下拉列表。我是html和Javascript的新手，在网上搜索没有帮助。

Answer 1

你可以尝试这个：

<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

Answer 2

只需在表格打开前打开表单，然后在标记后关闭表单。

就像这样：

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

Answer 3

您需要使用body关闭>元素，因此它看起来像这样：<body>。这就是你所需要的一切。

此外，如果您希望它是实际的下拉列表（现在它是一个选择框），请从size标记中删除select属性。

＆＃13;

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

＆＃13;

如何在表格中添加下拉列表？

3 个答案: