如何使用Javascript在表格中放置下拉菜单?

时间:2015-10-05 07:46:16

标签: javascript html drop-down-menu html-table

我想创建一个包含两列和非特定行的表。在第一列中应该只有一个字符串,一个名称或其他东西,但旁边应该有一个下拉菜单,我可以在其中选择一个修改左右。数据来自服务器和函数XY()我想扩展在<body>区域中构建的表,但是我尝试了所有内容,将下拉字段作为cell2失败。

代码:

<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.innerHTML = data.results[i].CUSTOMER_NAME;
        cell2.innerHTML = '<a href="javascript:void(0);" onclick="readProducts(' + data.results[i].STATION_ID + ')">' + "all_data" + '</a>';


        }
    }
</script>

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

此时cell2中只有一个Link,但我想在那里放一个下拉菜单。

1 个答案:

答案 0 :(得分:0)

使用Bootstrap下拉菜单。这非常有用。http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp