bootstrap modal-body中嵌套table网格问题 10C

如图在中实现modal-body中的table怎么能让th td正确的对准排版,jQuery1.7,bootstrap 还有如何在table中触发单选事件来获取一行tr的第一个td的值<img src="https://img-ask.csdn.net/upload/201703/03/1488528377_356405.jpg" alt="图片说明"></p>

1个回答

manshousu
manshousu 并不能解决问题
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
bootstraptable-edit使用问题

![图片说明](https://img-ask.csdn.net/upload/201908/06/1565077495_685813.png) 外部的表格无法获取数据,检查contentType属性配置问题。 ``` $(function() { //初始化Table var oTable = new TableInit(); oTable.Init(); }); var TableInit = function() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function() { $('#table').bootstrapTable({ url : 'list',//请求后台的URL(*) method : 'post',//请求方式(*) toolbar : '#toolbar',//工具按钮用哪个容器 striped : true,//是否显示行间隔色 cache : false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination : true,//是否显示分页(*) sortable : false,//是否启用排序 sortOrder : "asc",//排序方式 queryParams : oTableInit.queryParams,//传递参数(*) sidePagination : "server",//分页方式:client客户端分页,server服务端分页(*) pageNumber : 1,//初始化加载第一页,默认第一页 pageSize : 10,//每页的记录行数(*) pageList : [ 10, 25, 50, 100 ],//可供选择的每页的行数(*) search : true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType : "application/x-www-form-urlencoded", strictSearch : true, showColumns : true,//是否显示所有的列 showRefresh : true,//是否显示刷新按钮 minimumCountColumns : 2,//最少允许的列数 clickToSelect : true,//是否启用点击选中行 height : 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId : "id",//每一行的唯一标识,一般为主键列 showToggle : true,//是否显示详细视图和列表视图的切换按钮 cardView : false,//是否显示详细视图 detailView : false,//是否显示父子表 columns : [ { field : 'id', title : '编号' }, { field : 'name', title : '名字' }, { field : 'price', title : '价格' }, { field : 'operate', title : '操作', formatter : operateFormatter //自定义方法,添加操作按钮 }, ], rowStyle : function(row, index) { var classesArr = [ 'white', 'lightblue' ]; var strclass = ""; if (index % 2 === 0) {//偶数行 strclass = classesArr[0]; } else {//奇数行 strclass = classesArr[1]; } return { classes : strclass }; },//隔行变色 }); }; //得到查询的参数 oTableInit.queryParams = function(params) { var temp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit : params.limit,//页面大小 //pageNumber: params.pageNumber,//页码 offset : params.offset }; return temp; }; return oTableInit; }; function operateFormatter(value, row, index) {//赋予的参数 return [ '<a href="#" style="color:blue;" οnclick="edit(' + row.id + ')">编辑</a>|', '<a href="#" style="color:red;" οnclick="del(' + row.id + ')">删除</a>', ].join(''); } ``` table-edit.js ``` (function($){ 'use strict'; $.extend($.fn.bootstrapTable.defaults, { editable: false }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _init = BootstrapTable.prototype.init, _initBody = BootstrapTable.prototype.initBody, _onSort = BootstrapTable.prototype.onSort, _append = BootstrapTable.prototype.append, _initHeader = BootstrapTable.prototype.initHeader ; //添加编辑表格默认属性,如何edit设置为false时,表示该列不可编辑 $.extend(true,BootstrapTable.COLUMN_DEFAULTS,{ edit:{ type:'text'//目前只支持 文本:text 下拉:select 日期:date } }); BootstrapTable.prototype.init = function () { _init.apply(this, Array.prototype.slice.apply(arguments)); var that = this; that.prevEditRow = null;//上一次编辑的行 that.columns = {};//列配置信息 that.insertRowVal = {};//新插入行的默认值 that.enableAppend = true;//允许添加新行 if (that.options.editable) { var columnObj = this['getColumns'](); $.each(columnObj,function(i,obj){ $.each(obj,function(z,col){ if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){ if(col.checkbox)col.edit = false; that.columns['column'+col.fieldIndex] = col; that.insertRowVal[col.field] = ''; } }); }); //this.initEdit(); } }; /*BootstrapTable.prototype.initHeader = function(){ _initHeader.apply(this, Array.prototype.slice.apply(arguments)); this.$container.find('.fixed-table-header').addClass('success'); };*/ BootstrapTable.prototype.initBody = function () { var that = this; _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!that.options.editable) return; this.initEdit(); //如果列是下拉框,则转换值为对应的文本 $.each(that.columns,function(indx,col){ if(col.edit && col.edit.type == 'select'){ col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit); if(col.edit.data.length > 0){ that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(col.edit.data,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); } else if(col.edit.url){ $.ajax({ url:col.edit.url, type:'post', data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params, dataType:'json', success: function(jsonLst) { col.edit.onLoadSuccess.call(this,jsonLst); that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(jsonLst,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); col.edit.data = jsonLst; col.edit.url = null; }, error: function(xhr, textStatus, errorThrown){ col.edit.onLoadError.call(this); col.edit.data = []; col.edit.url = null; throw col.field+' 列下拉框数据加载失败'; } }); } } }); }; //根据行号删除指定行 BootstrapTable.prototype.removeRow = function (rowNum) { var that = this; var len = that.options.data.length; if (isNaN(rowNum)){ return; } if(that.$body.find('.editable-select').data('index') != rowNum){ recover(that); } //删除数据 that.options.data.splice(rowNum,1); if (len === that.options.data.length){ return; } var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify')){ if(indx > rowNum){ oldClass[indx-1] = 'editable-modify'; } else{ oldClass[indx] = 'editable-modify'; } } }); //this.prevEditRow = null; //this.$body.find('>tr').removeClass('editable-select'); that.initBody(); //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } //this.initEdit(); //没有数据时给提示加上样式 if(that.getData().length < 1){ that.$body.find('>tr').addClass('no-records-found'); } }; BootstrapTable.prototype.append = function (){ var that = this; //if(!that.enableAppend)return; var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify') || $(this).hasClass('editable-insert')){ oldClass[indx] = 'editable-modify'; } }); arguments[0] = $.extend({},that.insertRowVal,arguments[0]); _append.apply(this,Array.prototype.slice.apply(arguments)); if (that.options.editable){ //that.initEdit(); setTimeout(function (){ //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } that.$body.find('>tr:last').addClass('editable-modify'); that.$body.find('>tr:last').addClass('editable-insert');//双重保险,防止在快速点击添加时,为给新增行设置editable-modify属性 that.$body.find('>tr:last').click(); },60); } }; BootstrapTable.prototype.onSort = function () { _onSort.apply(this, Array.prototype.slice.apply(arguments)); var that = this; if (that.options.editable) { this.initEdit(); } }; BootstrapTable.prototype.getData = function () { return (this.searchText || this.searchCallback) ? this.data : this.options.data; }; BootstrapTable.prototype.getColumns = function () { return this.options.columns; }; /** * 获取有被修改过行的值 */ BootstrapTable.prototype.getModiDatas = function (){ var that = this; var datas = []; that.$body.find('.editable-modify').each(function(){ if(that.data[$(this).data('index')]){ datas.push(that.data[$(this).data('index')]); } }); return datas; }; /** * 获取指定列的和,参数为列下标 */ BootstrapTable.prototype.getColTotal = function (num){ var retVal = 0; this.$body.find('>tr').each(function(){ var colNum = 0; if($(this).hasClass('editable-select')){ colNum = $(this).find('td').eq(num).find('input').val(); } else{ colNum = $(this).find('td').eq(num).html(); } if(!isNaN(colNum)){//是数字才做想加 retVal += Number(colNum); } }); return retVal; }; /** * 创建可编辑表格 */ BootstrapTable.prototype.initEdit = function(){ var that = this, data = this.getData(); //this.$body.find('> tr').unbind('click').on('click' //this.$body.delegate('>tr','click' this.$body.find('> tr').unbind('click').on('click',function(){ var $tr = $(this); if($tr.hasClass('editable-select') || data.length < 1 || $tr.hasClass('no-records-found')){ return; } $tr.removeClass('no-records-found'); recover(that); that.prevEditRow = $tr; $tr.addClass('editable-select');//给当前编辑行添加样式,目前样式为空只做标识使用 that.$body.find('> tr').not(this).removeClass('editable-select'); $tr.find('td').closest('td').siblings().html(function(i,html){ initTrClick(that,this); }); }); //鼠标点击事件 $(document).bind('mousedown',function(event){ var $target = $(event.target); if(!($target.parents().andSelf().is(that.$body)) && !($target.parents().andSelf().is($('.datetimepicker')))){ setTimeout(function () { recover(that); //that.prevEditRow = null; //that.$body.find('> tr').removeClass('editable-select'); },10); }; }); }; $.fn.bootstrapTable.methods.push('getColumns', 'getModiDatas','removeRow','getColTotal'); /** * 给tr添加点击事件 */ function initTrClick(that,_this){ that.enableAppend = true; var $td = $(_this); var $tr = $td.parent(); var rowData = that.data[$tr.data('index')];//当前点击td所在行的数据 var tdIndex = $tr.children().index($td);//当前点击的td下标 var tdOpt = that.columns['column'+tdIndex]; if(!tdOpt.edit || typeof tdOpt.edit != 'object'){ return ; } $td.data('field',tdOpt.field); if(!$td.data('oldVal')){ $td.data('oldVal',$.trim(rowData[tdOpt.field])); } var height = $td.innerHeight() - 3; var width = $td.innerWidth() - 2; $td.data('style',$td.attr('style'));//保存原来的样式 $td.attr('style','margin:0px;padding:1px!important;'); var placeholder = ''; if(tdOpt.edit.required == true){ placeholder = '必填项'; } var value = rowData[tdOpt.field] == null || rowData[tdOpt.field] == ''?'':rowData[tdOpt.field]; $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;">' +'<input type="text" placeholder="'+placeholder+'" value="'+value+'" style="margin-left: 0px; margin-right: 0px; padding-top: 1px; padding-bottom: 1px; width:100%;height:100%">' +'</div>'); $td.width(width); var $input = $td.find('input'); if(!tdOpt.edit.type || tdOpt.edit.type == 'text'){ if(tdOpt.edit['click'] && typeof tdOpt.edit['click'] === 'function'){ $input.unbind('click').bind('click',function(event){ tdOpt.edit['click'].call(this,event); }); } if(tdOpt.edit['focus'] && typeof tdOpt.edit['focus'] === 'function'){ $input.unbind('focus').bind('focus',function(event){ tdOpt.edit['focus'].call(this,event); }); } $input.unbind('blur').on('blur',function(event){ if(tdOpt.edit['blur'] && typeof tdOpt.edit['blur'] === 'function'){ tdOpt.edit['blur'].call(this,event); } }); } else if(tdOpt.edit.type == 'select'){ $input.bootstrapSelect(tdOpt.edit); } else if(tdOpt.edit.type == 'date'){ $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;" class="input-group date form_datetime" data-link-field="dtp_editable_input">' +'<input class="form-control" type="text" value="'+value+'">' +'<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>' +'</div>' +'<input type="hidden" id="dtp_editable_input" value="'+value+'"/>' ); that.$body.find('.form_datetime').datetimepicker({ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, language:'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', pickerPosition: 'bottom-left', showMeridian: 1 }); } } /** * 恢复tr,使之处于不可编辑状态 */ function recover(that){ var isModi = false;//判断行值是否变动过 if(that.prevEditRow != null){ that.prevEditRow.find('td').closest('td').siblings().html(function(i,html){ $(this).attr('style',$(this).data('style')); var textVal = $(this).find('input[type="text"]').val(); var hiddenVal = $(this).find('input[type="hidden"]').val(); if(typeof $(this).find('input[type="text"]').bootstrapSelect('getText') != 'object'){ $(this).find('input[type="text"]').bootstrapSelect('destroy'); } if(textVal != undefined){ if($(this).data('oldVal') != (hiddenVal?hiddenVal:$.trim(textVal)) && $(this).data('field')) { that.data[that.prevEditRow.data('index')][$(this).data('field')] = hiddenVal?hiddenVal:$.trim(textVal); isModi = true; } if(that.columns['column'+i].edit.required == true){ if(textVal == null || textVal == ''){ that.enableAppend = false; return '<span style="color:red;">必填项不能为空</span>'; } } return $.trim(textVal); } }); //新值跟旧值不匹配证明被改过 if(isModi || that.prevEditRow.hasClass('editable-insert')){ that.prevEditRow.addClass('editable-modify'); } else{ that.prevEditRow.removeClass('editable-modify'); } that.prevEditRow = null; that.$body.find('> tr').removeClass('editable-select'); } } })(jQuery); ``` 哪位大神能帮忙解决下

bootstrap modal框出现蒙层,无法点击modal框内容

![图片说明](https://img-ask.csdn.net/upload/201808/28/1535466843_36340.png) ``` <header> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navb-header"> <div class="navbar-brand">Personal resume</div> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#divNav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="divNav" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#divModal" title="Print">Print</button> <div id="divModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button> <h4 class="modal-title">Print Resume</h4> </div> <div class="modal-body"> Print Preview or Print Config </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default">Print</button> </div> </div> </div> </div> </li> </ul> </div> </div> </nav> </header> ```

bootstrap modal弹出框问题

modal弹出来之后,在modal上面有文本框,文本域和下拉框, 当在文本框里面敲回车的时候,modal就自动关闭了。请大神帮忙解答, 这是啥问题

如何使用AJAX在Bootstrap Modal Body中加载MS-SQL数据?

<div class="post-text" itemprop="text"> <p>I'm working on a php CRUD application. I'm done coding for the Add part of it and it's working properly. Now I'm stuck at getting the data from sql database into the edit modal to update it further</p> <p>This particular page loads titles based on the selection of type we make from a dropdown. So it displays all the titles that belong to the same type(typeId). On clicking the particular title it displays the respective data. Then it has a edit button which is associated to a modal. </p> <p>The modal is being displayed on pressing the edit button, but there's no data being fetched in it. </p> <p>Here's what I've tried:</p> <pre><code>admin.php &lt;?php $titleId = filter_input(INPUT_GET, "titleId"); $active = "admin" . $titleId; require_once './pages/header.php'; require_once './functions/queries.php'; $getAll = Queries::getAllTitle($typeId); ?&gt; &lt;div class="container"&gt; &lt;div class="panel-group" id="titleAccordion"&gt; &lt;?php for ($i = 0; $i &lt; count($getAll); $i++) { echo &lt;&lt;&lt;HTML &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt;&lt;h4 class="panel-title"&gt; &lt;a data-toggle="collapse" data- parent="#titleAccordion" href="#collapseF{$i}"&gt;{$getAll[$i]['title']}&lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseF{$i}" class="panel-collapse collapse"&gt; &lt;div class="panel-body"&gt; &lt;div class="table-responsive"&gt; &lt;table class="table table-condensed"&gt;&lt;tbody&gt; &lt;tr&gt;&lt;td&gt;Title:&lt;/td&gt;&lt;td&gt;{$getAll[$i]['title']} &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Units:&lt;/td&gt;&lt;td&gt;{$getAll[$i]['units']} &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Category:&lt;/td&gt;&lt;td&gt;{$getAll[$i] ['category']}&lt;/td&gt;&lt;/tr&gt; &lt;tbody&gt;&lt;/table&gt; &lt;/div&gt; &lt;button type="button" class="btn btn-warning btn- sm" data-toggle="modal" data-target="#titleEditModal" onclick="editTitleModal('{$getAll[$i]['titleId']}')"&gt;&lt;span class="glyphicon glyphicon-edit" aria-hidden="true"&gt;&lt;/span&gt; Edit Title&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; HTML; } ?&gt; </code></pre> <p> </p> <pre><code> &lt;!-- Title Add Modal--&gt; &lt;div class="modal fade" id="facultyAddModal" role="dialog"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data- dismiss="modal"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title"&gt;Add Title&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;div id="adminResult" class="hide" role="alert"&gt; &lt;button type="button" class="close" data-dismiss="alert" aria- label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; &lt;div id="resultAdminContent"&gt;&lt;/div&gt; &lt;/div&gt; &lt;form class="cmxform" id="adminForm"&gt; &lt;label for="Activity"&gt;ActivityAttended (required)&lt;/label&gt; &lt;input class="form-control" id="adminTitle" name="title" type="text" required&gt; &lt;br&gt; &lt;label for="units"&gt;Units (required)&lt;/label&gt; &lt;input class="form-control" id="adminUnits" type="number" name="units" required&gt; &lt;br&gt; &lt;label for="Category"&gt;Category (Optional)&lt;/label&gt; &lt;input class="form-control" id="adminCategory" type="text" name="category"&gt; &lt;br&gt; &lt;?php echo '&lt;input type="hidden" id="addadminTypeId" value="'.$typeId.'"&gt;'; ?&gt; &lt;button class="btn btn-info btn-primary" type="submit"&gt;Submit&lt;/button&gt; &lt;br&gt; &lt;br&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; main.js function editTitleModalSubmit(titleId, title, units, category, typeid) { $.ajax({ url: 'functions/administration-functions.php', type: 'POST', data: {"title": $('#editadminTitle').val(), "units": $('#editadminUnits').val(), "category": $('#editadminCategory').val(), "titleId":titleId, "typeId": $('#editTypeId').val(), "switch":"edit"}, dataType: "json", success: function (data) { $('#editadminTitle').val(data["title"]); $('#editadminUnits').val(data["units"]); $('#editadminCategory').val(data["category"]); $('#editTitleId').val(data["titleId"]); $('#editTypeId').val(data["typeId"]); }, error: function (error) { console.log(error); } }); } function titles() { $.ajax({ url: 'functions/administration-functions.php', type: 'POST', data: {"switch": "getAll"}, dataType: "json", success: function (data) { $('#titleAccordion').empty(); $.each(data, function (i) { $('#titleAccordion').append('\ &lt;div class="panel panel-default"&gt; \ &lt;div class="panel-heading"&gt;&lt;h4 class="panel-title"&gt; \ &lt;a data-toggle="collapse" data- parent="#titleAccordion" href="#collapseF' + i + '"&gt;' + data[i] ["title"] + ' ' + data[i]["units"] + ' (' + data[i]["category"] + ') &lt;/a&gt;&lt;/h4&gt; \ &lt;/div&gt; \ &lt;div id="collapseF' + i + '" class="panel-collapse collapse"&gt; \ &lt;div class="panel-body"&gt; \ &lt;div class="table-responsive"&gt; \ &lt;table class="table table-condensed"&gt; &lt;tbody&gt; \ &lt;tr&gt;&lt;td&gt;Title:&lt;/td&gt;&lt;td&gt;' + data[i] ["title"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;tr&gt;&lt;td&gt;Units:&lt;/td&gt;&lt;td&gt;' + data[i] ["units"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;tr&gt;&lt;td&gt;Category:&lt;/td&gt;&lt;td&gt;' + data[i] ["category"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; \ &lt;tbody&gt;&lt;/table&gt; \ &lt;/div&gt; \ &lt;button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#facultyEditModal" onclick="editTitleModal(\'' + data[i]["titleId"] + '\')"&gt;Edit Title&lt;/button&gt; \ &lt;/div&gt; \ &lt;/div&gt; \ &lt;/div&gt;'); }); $('#titleAccordion').change(); }, error: function (error) { console.log("Socrates Error - faculty.js 105: " + error); } }); } administration-functons &lt;?php require_once './queries.php'; $title = filter_input(INPUT_POST, "title"); $units = filter_input(INPUT_POST, "units"); $category = filter_input(INPUT_POST, "category"); $typeId = filter_input(INPUT_POST, "typeId"); $titleId = filter_input(INPUT_POST, "titleId"); $switch = filter_input(INPUT_POST, "switch"); switch ($switch) { case 'add'; echo Queries::addTitle($title, $units, $category, $typeId); break; case 'get'; echo Queries::getdata($titleId); break; case 'getAll'; echo Queries::getAllTitle($typeId); break; case 'edit': echo Queries::editTitle($title, $units, $category, $typeId, $titleId); break; } ?&gt; </code></pre> <p>The above code isn't fetching the data in the modal. However I could see the data of the first title for every title I select in the console. </p> <p>I'm expecting the respective data to be fetched on selecting the edit button to be made changes further.</p> </div>

Bootstrap Modal - 如何从php(数据库)提供数据

<div class="post-text" itemprop="text"> <p>This is probably very simple, but am learning PHP, Javascript as I go. I find it easier to learn using real examples than the contrived examples given online.</p> <p>I am creating an attendance register page, based on selecting a class, then all members of that class ordered by Surname and Firstname. </p> <p>The table row has it's id set, by PHP, as the record's mem_id, and contains just forename+" "+surname, and some checkboxes.</p> <p>All this is working fine, but now I have been asked to add a link so that clicking on it brings up a modal containing related data for the person selected. The extra data is already in the $a_fetch array.</p> <p>Have added a glyphicon link for every row and clicking it displays a modal alright, and by having a javascript function I know I can get the row index and row id</p> <pre><code>&lt;tbody&gt; &lt;?php while($g_fetch = $a_query-&gt;fetch_array()) { $checked = array(); $memid = $g_fetch['mem_id']; $name = $g_fetch['firstname'].' '.$g_fetch['lastname']; $attendences = explode(",",$g_fetch['attend']); for ($x = 0; $x &lt;= 12; $x++) { if ($attendences[$x]!="0") { $checked[$x] = 'checked = "checked"'; } else $checked[$x] = ''; } echo "&lt;tr id='".$memid."'&gt;"; echo "&lt;td&gt;".$name."&lt;/td&gt;"; echo "&lt;td align='center'&gt;&lt;div id='".$memid."' class='glyphicon glyphicon-info-sign' onclick='getId(this.id)' style='cursor:pointer' data-toggle='modal' data-target='#ModalCentre'&gt;&lt;/div&gt;"; for ($y = 0; $y &lt;= 12; $y++) { echo '&lt;td align="center"&gt;&lt;input type="checkbox" value = "" '.$checked[$y].'&gt;&lt;/td&gt;'; } } unset($checked); unset($attendences); ?&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I am at a loss as how to proceed - is it even possible to pass data to the modal to display related data?</p> <p>If it is would I need to run a new query (SELECT), or as the row is the same index as the data in the $A_fetch, and the row id has the correct mem_id is it possible to get the data from the existing $a_fetch array using either of those, or would I need to run a new SELECT?</p> <p>Many thanks</p> </div>

为什么使用jQuery1.7.2版本时,bootstrap-table数据不显示?

使用jQuery1.9以上版本时,bootstrap-table数据会显示;换成jQuery1.7.2版本时,bootstrap-table数据不显示?

bootstrap-tree-table不显示数据

前段代码 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <th:block th:include="include :: header('学生列表')"/> </head> <body> <div> <table id="bootstrap-tree-table"></table> </div> <th:block th:include="include :: footer"/> <script th:inline="javascript"> var prefix = ctx + "system/student" $(function () { var options = { url: prefix + "/studentlist", columns: [ { field: 'Sno', title: '学生学号', }, { field: 'Sname', title: '学生姓名', }, { field: 'Ssex', title: '学生性别', }, { field: 'Sclass', title: '学生班级', }, { field: 'Birth', title: '学生生日', }, { field: 'Saddress', title: '学生地址', }, { field: 'Sdept', title: '学生学院', }, { field: 'Stime', title: '入学时间', }] }; $.treeTable.init(options); }); </script> </body> </html> 显示读出了数据 ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546625_694186.png) 但是页面上没有显示 ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546689_836461.png)

bootStrap-table 如何冻结最后一列

bootStrap-table 如何冻结最后一列?网上说了一个引入bootstrap-table-fixed-columns.js文件但是,不能冻结最后一列

bootstrap-table表头固定后内容不对齐问题的

使用bootstrap-table.js后 , 给table设置height后表格内容对不齐 , 但不设置height表头无法固定 , 如何解决这一问题 , 网上很多办法说注释源码中的两行代码 , 但注释掉之后表头无法进行固定![图片说明](http://img.ask![图片说明](https://img-ask.csdn.net/upload/201712/20/1513771801_338135.png).csdn.net/upload/201712/20/![图片说明](https://img-ask.csdn.net/upload/201712/20/1513771809_117135.png)1513771748_177466.png)

bootstrap table onPostBody事件

![图片说明](https://img-ask.csdn.net/upload/201812/03/1543838613_826352.png) 我在bootstrap table中的field中定义的formatter formatter:function(value,row,index){ if (value == undefined) { value = "选择"; } var html = ""; html += "<input class = 'traningHour_date' >"; html += "-"; html += "<input class = 'traningHour_date' >"; return html; } 我想在onPostBody事件中获取$('.traningHour_date')元素,为什么会获取不到,onPostBody方法不就是在dom加载完成之后触发的事件吗? 为什么在onPostBody中获取的$('.traningHour_date').length为0,实际应该为12。 请教大神,这是为什么?什么时机才能获取到$('.traningHour_date')元素?

bootstrap modal弹出框 关闭后会再弹出一次 急求解答

``` <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>alert_modal弹出框</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html> ```

bootStrap-table 无法根据index删除对应行

$(function () { var options = { url: prefix + "/init", sortName: "createTime", sortOrder: "desc", modalName: "空箱", search: false, showExport: false, uniqueId: 'index', columns: [ { field: 'index', align: 'center', title: '序号', formatter: function (value, row, index) { return index + 1; } }, { field: 'containerType', align: 'center', title: '箱型' }, { field: 'quantity', align: 'center', title: '数量' }, { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="delDetail(\'' + index + '\')"><i class="fa fa-remove"></i>删除</a> '); return actions.join(''); } }], showToggle: false, showColumns: false, showSearch: false, showRefresh: false }; $.table.init(options); }); function addDetail() { var _data = { "containerType": $("#containerType option:selected").val(), "quantity": $("input[name='quantity']").val() }; $("#bootstrap-table").bootstrapTable('prepend', _data); } function delDetail(index) { console.log([parseInt(index)]); $('#bootstrap-table').bootstrapTable('remove', { field: "index", values: [parseInt(index)] }); } 上面这个删除方法删不掉

bootstrap-table怎么进行重置?

目前使用的是table显示订单信息 但是点击订单还要显示订单详细信息 所以要将table中的值换掉但是bootstrap-table的remove只能remove掉表格中的数据 如何把表格的列也给move掉啊

bootstrap的table table-bordered属性,原先正常的,我就在表格中加了几个居中属性。边框打印出来很淡很淡

如题,原先边框挺正常的,我仅仅改了几个单元格的居中属性。表格打印出来边框就很淡很淡,但查看是正常的,打印预览开始就很淡。这是什么鬼?我ie和chrom都试了,都是很淡。

Bootstrap 模态框中嵌入jqgrid 切换页面jqgrid宽度会变为0

有没有碰到过这种情况 :在火狐浏览器中 bootstrap的modal模态框中嵌套了jqgrid,在切换几个类似的模态框的时候 页面就变成这样了。。。很是奇怪 然后跟踪页面看到 jqgrid宽度为0 ![图片说明](https://img-ask.csdn.net/upload/201903/20/1553070512_2073.png) ![图片说明](https://img-ask.csdn.net/upload/201903/20/1553070743_285190.png)

bootstrap table X-editable插件 输入值初始化问题

![图片说明](https://img-ask.csdn.net/upload/201908/01/1564647389_464416.jpg) ``` field : 'financingInReturn', title : '佣金比例', sortable : true, formatter : function(value){ return value + "%"; }, editable: { type: 'text', title: '佣金比例', mode: "inline", value: "", // 这一段不知道怎么处理 validate: function (v) { if (!v) return '不能为空'; } } ``` ![图片说明](https://img-ask.csdn.net/upload/201908/01/1564647523_519678.jpg) 需求就是输入框里面的值后面%号不出现,求大神答疑。

bootstrap-table引起的jquery错误

我使用的是bootstrap-table V1.11.1版本 jquery使用的是V1.7.1版本,在IE11+包含IE11的版本中没有遇到错误,但是在IE10几一下显示表格时遇到![图片说明](https://img-ask.csdn.net/upload/201708/31/1504150851_208419.png)

bootstrap-table中如何实现带模糊查询的下拉菜单

我知道普通的html可以用特定的JS函数写出带文本框查询的下拉菜单,也知道 bootstrap-select插件可以自动实现带查询框的下拉菜单,bootstr-table自己 可以生成下拉菜单,但是只能是json格式,生成不了文本框,那么怎么能在 bootstrap-table这种插件里写带模糊查询的下拉菜单

Bootstrap 3 class =“media-body”导致图像无法显示

<div class="post-text" itemprop="text"> <p>I have the following code:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid&gt; {files} &lt;div class="media"&gt; &lt;div class="media-left"&gt; &lt;img src="&lt;?php echo base_url('files/{filename}'); ?&gt;" alt="afbeelding" class="media-object" style="width:200px"&gt; &lt;/div&gt; &lt;div class="media-body"&gt; &lt;h4 class="media-heading"&gt;{title}&lt;/h4&gt; &lt;p&gt;{text}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt; {/files} &lt;/div&gt; </code></pre> <p>The current result is just the title and text being shown, without the image. When I remove the whole div with class "<code>media-body</code>", the image shows. I <em>think</em> my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?</p> </div>

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

Linux 会成为主流桌面操作系统吗?

整理 |屠敏出品 | CSDN(ID:CSDNnews)2020 年 1 月 14 日,微软正式停止了 Windows 7 系统的扩展支持,这意味着服役十年的 Windows 7,属于...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

学习总结之HTML5剑指前端(建议收藏,图文并茂)

前言学习《HTML5与CSS3权威指南》这本书很不错,学完之后我颇有感触,觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。这本书主要学习HTML5和css3,看...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

记一次腾讯面试,我挂在了最熟悉不过的队列上……

腾讯后台面试,面试官问:如何自己实现队列?

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

冒泡排序动画(基于python pygame实现)

本项目效果初始截图如下 动画见本人b站投稿:https://www.bilibili.com/video/av95491382 本项目对应github地址:https://github.com/BigShuang python版本:3.6,pygame版本:1.9.3。(python版本一致应该就没什么问题) 样例gif如下 ======================= 大爽歌作,mad

Redis核心原理与应用实践

Redis核心原理与应用实践 在很多场景下都会使用Redis,但是到了深层次的时候就了解的不是那么深刻,以至于在面试的时候经常会遇到卡壳的现象,学习知识要做到系统和深入,不要把Redis想象的过于复杂,和Mysql一样,是个读取数据的软件。 有一个理解是Redis是key value缓存服务器,更多的优点在于对value的操作更加丰富。 安装 yum install redis #yum安装 b...

现代的 “Hello, World”,可不仅仅是几行代码而已

作者 |Charles R. Martin译者 | 弯月,责编 | 夕颜头图 |付费下载自视觉中国出品 | CSDN(ID:CSDNnews)新手...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

!大部分程序员只会写3年代码

如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

立即提问
相关内容推荐