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

我在編寫一個web-app，它從服務器獲取數據。我想把這些數據放在一個有兩列的表格中。在第一列中應該有一個名稱，在第二列中應該是一個下拉列表，用於選擇我想要了解第一列中名稱的詳細信息。

我的代碼：

<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，並在網上搜索沒有幫助。

來源

2015-10-02 Yvonne.J.M

什麼功能？我沒有看到任何功能來創建下拉菜單。您還錯過了一個結束標記''，並且有一個未完成的主體標記'

我的代碼長度超過400行，因爲我也有很多其他功能。我很抱歉錯過這兩個。在我的代碼中他們是正確的 –

我嘗試了很多事情。有沒有人知道我如何用下拉菜單填充cell2？我認爲這是我的主要問題 –

你可以試試這個：

<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

來源

2015-10-02 12:59:22

只需在表格打開之前打開表格，然後在表格打開後關閉表格。

就像這樣：

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

來源

2015-10-02 12:58:55 thommylue

只需編輯原始答案。不要保留舊的和添加固定的。這很混亂。 –

完成，謝謝你的提示！ – thommylue

當表格是表格的一部分時，這意味着什麼？ –

你需要用>關閉body元素，所以它看起來是這樣的：<body> 。這就是你需要的。另外，如果您希望它是實際的下拉列表（現在是選擇框），請從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>

來源

2015-10-02 13:45:51 CDelaney

你是什麼意思與「實際下拉」？ –

您的示例不是下拉菜單。 'size'屬性允許一次查看所有選項。下拉菜單僅顯示當前值，然後單擊它以顯示其他可用選項。看到這裏：http://plnkr.co/edit/cVfaY5EDWsmlz9EBHNi2?p=preview – CDelaney

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

回答

相關問題