需求：
在编辑数据的时候，既可以让用户输入，也可以从下拉框中选择
思路:
参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为1列，输入列可以设置是否输入(方法:<td contenteditable="true">)。图中没有设置输入，因为班级是value,name形式的，只能选择。
环境：
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
时间： 2024-10-06 14:29:11