需求：
在编辑数据的时候，既可以让用户输入，也可以从下拉框中选择
思路:
参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为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; 100%; cursor:pointer; text-align: center; border-buttom:solid 1px gray; } .combox-select-div:hover{ background-color: #ccc; } .td-comboxdiv { display:none; 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;100px;border-right: 0px solid #ccc;">GIS120'+i+'</td>', '<td style="padding:0px;background-color:white;border-left: 0px solid #ccc;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