需求：
在編輯數據的時候，既可以讓用戶輸入，也可以從下拉框中選擇
思路:
參照下面的效果圖，因為是表格里面的數據，所以下拉框觸發按鈕和輸入框分別為1列，輸入列可以設置是否輸入(方法:<td contenteditable="true">)。圖中沒有設置輸入，因為班級是value,name形式的，只能選擇。
環境：
Chrome+Jquery+bootstrap+HTML5
效果圖：
代碼：
<html> <head> <title>Table下拉選擇輸入框</title> <link href="../lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="../lib/bootstrap-3.3.7/js/jquery-3.1.1.min.js"></script> <script src="../lib/bootstrap-3.3.7/js/bootstrap.js"></script> </head> <style> .combox-select-div{ line-height: 30px; border-bottom: 1px solid #ccc; height:30px; width:100%; cursor:pointer; text-align: center; border-buttom:solid 1px gray; } .combox-select-div:hover{ background-color: #ccc; } .td-comboxdiv { display:none; width:134px; height:200px; background-color:white; overflow:auto; overflow-y:scroll; position:absolute; z-index:1000; box-shadow:0 6px 12px rgba(0,0,0,.175); } </style> <script> $(document).ready(function(){ //填充數據 for(var i=1;i<10;i++) { str = [ '<tr id="row_'+i+'">', '<td >小明'+i+'</td>', '<td>男</td>', '<td >2'+i+'</td>', '<td name="'+i+'" style="background-color:white;width:100px;border-right: 0px solid #ccc;">GIS120'+i+'</td>', '<td style="padding:0px;background-color:white;border-left: 0px solid #ccc;width:34px"><button onclick="createDropSelect(this)" type="button" style="margin:1px;float:right;height: 34px;" class="btn btn-default dropdown-toggle"><span class="caret"></span></button></td>', '<td>', '<a class="glyphicon glyphicon-floppy-disk size16" style="cursor:pointer" title="保存" onclick="saveUpdateLabelDate(this)"></a>', '</td>', '</tr>' ]; var tbstr=str.join(''); $('#TempDialogTable').append(tbstr); } }); //點擊下拉按鈕彈出班級下拉框 function createDropSelect(btobj){ var comboxobj=$('#modalLabelCombox'); var display =comboxobj.css('display'); var index=btobj.parentNode.parentNode.offsetTop; var left=btobj.parentNode.offsetLeft; var rowId=btobj.parentNode.parentNode.id; if(display=="none") { comboxobj.css({"left":left-100,"top":index+40,"display":"block"}); } else { comboxobj.css("display","none"); } var str="" for(var i=1;i<10;i++) { str+='<div value='+i+' onclick="getDropSelectValue('+rowId+',this)" class="combox-select-div">GIS120'+i+'</div>'; } comboxobj.html(str); } //將選擇的班級信息填入到班級列中 function getDropSelectValue(rowId,selecttext){ $(rowId.cells[3]).attr("name",$(selecttext).attr("value")); rowId.cells[3].innerText=selecttext.innerText; $('#modalLabelCombox').css("display","none"); } //點擊保存獲取班級信息 function saveUpdateLabelDate(bdom){ var aleteRow=bdom.parentNode.parentNode; var lbId=aleteRow.cells[0].innerText; //姓名 var tagid=$(aleteRow.cells[3]).attr("name"); //班級編號 alert("班級編號:"+tagid); } </script> <body > <div class="td-comboxdiv" id="modalLabelCombox"></div> <table id="TempDialogTable" class="table table-striped table-bordered" > <thead style="background-color:#E7E6E6;"> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th colspan=2>班級</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </body> </html>
博客源址:http://www.cnblogs.com/GIScore/p/7244227.html