需求：

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

思路:

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

    A 水题 B 直接看2,发现`unordered_map被卡了...` 乖乖离散化 C 有六种水管,可以任意的旋转,使得有一条从(1, 0)到(2, n)的通路. 找规律,当时写D没来得及看 #inc ...

  2. Codeforces3C. Tic-tac-toe 题解 状态压缩+搜索

    作者:zifeiy 标签:状态压缩.搜索 题目链接:https://codeforces.com/contest/3/problem/C 题目大意: 有一个 \(3 \times 3\) 的棋盘,给你 ...

  3. CentOS7在防火墙与端口上的操作

    https://jingyan.baidu.com/article/cdddd41cb3bf6c53cb00e1ac.html CentOS7在安装软件包或类库的时候,常常会因为防火墙的拦截和端口未开 ...

  4. python进阶之异常处理

    异常处理 在代码运行时,会因为各种原因出现bug,而程序遇到bug就会中断运行,而在日常生产中程序是要长时间运行不能随意中断的.因此就需要我们提前做好异常处理. 异常 print(x) # 一般报错就 ...

  5. SpringBoot2.X 项目使用外置绝对路径的配置文件

    spring-boot-absolute-config 前言 该工程是为解决应用部署应用时指定配置文件存放位置的问题. SpringBoot项目默认加载以下位置的配置文件: ? 1 2 3 4 cla ...

  6. Echarts构建图表

    Echarts学习-构建图表 相信有很多的前端开发人员在开发Echarts图表的过程中都遇到对图表结构过无从下手,面对一大堆的专业词汇一脸懵逼的样子,在经过了一段时间的踩坑后,终于摸索出了一套完善的学 ...

  7. 五子棋C++版

    当前只完成了单机人人对战  后续会完成联机和AI的实现 定义棋盘 typedef struct { int kind; }Map; //棋盘 0为无子 1为黑子 2为白子 Map maps[line_ ...

  8. SpringCloud + Consul服务注册中心 + gateway网关

    1  启动Consul 2  创建springcloud-consul项目及三个子模块 2.1 数据模块consul-producer 2.2 数据消费模块consul-consumer 2.3 ga ...

  9. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  10. 聊一聊 MySQL 中的事务及其实现原理

    说到数据库,那就一定会聊到事务,事务也是面试中常问的问题,我们先来一个面试场景: 面试官:"事务的四大特性是什么?" 我:"ACID,即原子性(Atomicity).隔离 ...