我是新的HTML和Javascript，但我尽我最大的努力。
我有以下问题:我想做一个按钮，可以点击，以便下拉菜单打开其中列出的数据表。从这个下拉菜单中，用户应该能够按下一个数字，然后插入到输入框中。
var table = document.getElementById("arbeitszeit");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function() {
tableText(this);
};
}
}
function tableText(tableCell) {
document.getElementById("arbeitszeitjeha").value = tableCell.innerHTML;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body id="Bodenpreisrechner">
<div class="container">
<form>
<section class="row">
<div class"col-md-6">
<div class="input-group">
<label for="lohn"> Durchschnittliche Arbeitszeit je Hektar
<input id="arbeitszeitjeha" input type="number" class="form-control" aria-label="..." placeholder="Stunden/ha">
</label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="hilfe" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Hilfe
<span class="caret"></span>
</button>
<ol class="dropdown-menu" aria-labelledby="hilfe">
<table id="arbeitszeit" height="auto" class="gridtable" border="1" style="cursor: pointer;">
<tr>
<td></td>
<td>10ha</td>
<td>50ha</td>
<td>100ha</td>
<td>Individuel</td>
</tr>
<tr>
<td>Marktfrucht</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td><a href="http://daten.ktbl.de/vrpflanze/prodverfahren/start.action#start" target="_blank">KTBL</a></td>
</tr>
<tr>
<td>Milchvieh</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td><a href="http://daten.ktbl.de/wkrtier/?tx_ktblsso_checktoken[token]=" target="_blank">KTBL</a></td>
</tr>
<tr>
<td>Veredelung</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td><a href="http://daten.ktbl.de/wkrtier/?tx_ktblsso_checktoken[token]=" target="_blank">KTBL</a></td>
</tr>
</table>
</ol>
</div>
</div>
</div>
</section>
</form>
</div>
在下拉菜单中包含那个表的最好方法是什么?
亲切的问候,JKS
我认为最好的方法是做一个自制的css下拉菜单。使用ul来表示您的姓名等，使用li来表示数据
<ul><li>Marktfrucht</li>
<li>Milchvieh</li>
<li>
Milchvieh
<ul>
<li>10</li>
<li>10</li>
<li>10</li>
</ul>
</li>
<li>Veredelung</li>
</ul>
接下来执行一些css魔术来添加下拉功能这里只是一个简单的例子d
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #557;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}