需求：

在编辑数据的时候，既可以让用户输入，也可以从下拉框中选择

思路:

参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为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

基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能的更多相关文章

  1. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  2. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  3. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  6. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  7. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  8. select2 智能补全模糊查询select2的下拉选择框使用

    我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

随机推荐

  1. 条件随机场(CRF) - 4 - 学习方法和预测算法(维特比算法)

    声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结,不得用作商用,欢迎转载,但请注明出处(即:本帖地址). 2,由于本人在学习初始时有很多数学知识都已忘记,所以为了 ...

  2. pytorch入坑一 | Tensor及其基本操作

    由于之前的草稿都没了,现在只有重写…. 我好痛苦 本章只是对pytorch的常规操作进行一个总结,大家看过有脑子里有印象就好,知道有这么个东西,需要的时候可以再去详细的看,另外也还是需要在实战中多运用 ...

  3. 再一次利用with as 优化SQL

    上海的一个哥们问我有个SQL跑了4个小时都没跑完,实在受不了了,找我优化一下.我确实挺佩服他的,要是我遇到跑了几分钟的,就受不了了. SQL语句和执行计划如下: --sql id:1qbbw3th4x ...

  4. MySQL中Index Merge简介

    索引合并优化 官网翻译 MySQL5.7文档 索引合并是为了减少几个范围(type中的range类型:range can be used when a key column is compared t ...

  5. laravel怎么开启调试模式

      在.env文件里有个APP_DEBUG=true,如果是false,改成true就好了.

  6. 如何在 centos 7.3 上安装 caffe 深度学习工具

    有好多朋友在安装 caffe 时遇到不少问题.(看文章的朋友希望关心一下我的创业项目趣智思成) 今天测试并整理一下安装过程.我是在阿里云上测试,选择centos 7.3 镜像. 先安装 epel 源 ...

  7. 基于AutoIt3的Ping、网址转IP地址，以及hosts文件写入

    #include <Constants.au3> #include <GUIConstantsEx.au3> GUICreate("通讯测试-eip.hxgroup. ...

  8. MSBuild 常用参数

    本文告诉大家在 MSBuild 里面常用的参数 一般的 msbuild 在编译的时候都会添加很多参数,用法如下 进入对应编译的 sln 或 csproj 文件所在的文件夹,执行下面命名 msbuild ...

  9. JavaSE基础知识---常用对象API之String类

    一.String类 Java中用String类对字符串进行了对象的封装,这样的好处在于对象封装后可以定义N多属性和行为,就可以对字符串这种常见的数据进行方便的操作. 格式:(1)String s1 = ...

  10. <sUbjeCt>Reverse aAlignment SemInaR

    翻译过来就是有关逆序对问题的专题. 因为大胆报名担任学校专题讲师所以跪着也要准备好课件...那什么是逆序对? 逆序对就是序列中ai>aj且i<j的有序对 举个栗子: 其中,5>4,但 ...