一个js table 拖拽的问题!求大佬解答 5C

功能是 table的列可以左右拖拽替换里面的内容,但是 列过多的时候 就会出现横向滚动条,现在的情况时 拖动到最后的时候滚动条并不会跟着走,想达到的结果是 拖拽列到最后的时候 想叫横向滚动条跟着走。 希望大佬解答下!谢谢

2个回答

这是代码

<!DOCTYPE html>






<br> #table-draf {<br> position:fixed;<br> display:none;<br> background:#fff;<br> text-align:center;<br> top:0;<br> background-color:#000;<br> background-color:rgba(0,0,0,0.8);<br> color:#fff;<br> /*height:400px;*/<br> cursor:move;<br> }</p> <p>#table-draf p {<br> line-height: 2<br> }</p> <p>#tabledraf0 {<br> position: relative;<br> top: 0;<br> left: 0;<br> }<br> .table-responsive{</p> <pre><code>min-height: 0.01%; position: relative; overflow-x: auto; </code></pre> <p>}</p> <pre><code>table { width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0 } table th { text-align: left; font-weight: 400 } .table-title { display: block; background: #82c6f9; padding: 11px 0; text-align: center; color: #fff; margin: 0; } .table th { background: #333333; color: #fff; font-weight: bold } .thead-opacity { opacity: .6; } .table th, .table td { text-align: center; padding: 6px 3px; word-break: break-all } .table-rowspan th&gt;div, .table-rowspan td&gt;div { display: inline-block; margin: 0 auto; width: 100%; padding: 2px; } .table-div { border-top: 1px solid #ddd; border-left: 0; border-right: 0; padding: 6px 0 } .table-div:first-child { border: 0 } .table td {} /*.table tbody tr:first-child:hover { background: #288ce2 !important </code></pre> <p>}*/</p> <pre><code>body .table-tongji tbody tr:first-child:hover { background: #fff !important; } .table tbody tr.success&gt;td { background-color: #dff0d8 } .table tbody tr.error&gt;td { background-color: #f2dede } .table tbody tr.warning&gt;td { background-color: #fcf8e3 } .table tbody tr.info&gt;td { background-color: #d9edf7 } .table tbody+tbody { border-top: 2px solid #ddd } .table .table { background-color: #fff } .table-border { border-top: 1px solid #ddd } .table-border th, .table-border td { border-bottom: 1px solid #ddd } .table-bg thead th { background-color: #f5fafe } .table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; border-left: 0 } .table-bordered th, .table-bordered td { border-left: 1px solid #ddd } .table-border.table-bordered { border-bottom: 0 } .table-striped tbody&gt;tr:nth-child(odd)&gt;td { background-color: #f9f9f9 } .table-condensed th, .table-condensed td { padding: 4px 5px } .table-hover tbody tr:hover td { background-color: #f5f5f5 } .table tbody tr.selected td { background-color: #f3f3f3 } .table tbody tr.active, .table tbody tr.active&gt;td, .table tbody tr.active&gt;th, .table tbody tr .active { background-color: #f5f5f5!important } .table tbody tr.success, .table tbody tr.success&gt;td, .table tbody tr.success&gt;th, .table tbody tr .success { background-color: #dff0d8!important } .table tbody tr.warning, .table tbody tr.warning&gt;td, .table tbody tr.warning&gt;th, .table tbody tr .warning { background-color: #fcf8e3!important } .table tbody tr.danger, .table tbody tr.danger&gt;td, .table tbody tr.danger&gt;th, .table tbody tr .danger { background-color: #f2dede!important } .table .text-c th, .table .text-c td { text-align: center } .table .text-r th, .table .text-r td { text-align: right } .table th.text-l, .table td.text-l { text-align: left!important } .table th.text-c, .table td.text-c { text-align: center!important } .table th.text-r, .table td.text-r { text-align: right!important } &lt;/style&gt; </code></pre> <p></head></p> <p><body><br> <div class="wrap" style="overflow: hidden;"><br> <div class="table-responsive"><br> <div id="chenkbox"><br> <table id="tabledraf1" style="width: 3000px;" class="table table-border table-bordered "><br> <tr><br> <th style="width: 20px;"><br> <input type="checkbox" name="selectall" id="" value="" /><br> </th><br> <th>订单号</th><br> <th>订单类型</th><br> <th>货主</th><br> <th>业务员</th><br> <th>发货人</th><br> <th>收货人</th><br> <th>货物名</th><br> <th>出发城市</th><br> <th>到达城市</th><br> <th>操作</th><br> <th>订单状态</th><br> <th>下单时间</th><br> <th>发货时间</th><br> <th>到达时间</th><br> <th>是否回单</th><br> <th>设备是否返回</th><br> <th>订单是否结算</th><br> <th>温度/位置</th><br> <th>订单金额</th><br> <th>异常扣款</th><br> <th>去税收入</th><br> <th>税前支出</th><br> <th>去税支出</th><br> <th>中转费</th><br> <th>仓储费</th><br> <th>去税利润</th><br> <th>税前利润</th><br> </tr><br> <tbody id="tbody"><br> <tr><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> </tr><br> </tbody></p> <pre><code> &lt;/table&gt; &lt;div id=&quot;table-draf&quot;&gt; &lt;div class=&quot;bhead&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></body></p> <p></html></p> <script> Drag('tabledraf1') //拖动 function Drag(table) { var ochek = document.getElementById("chenkbox"), // otable0 = document.getElementById(tableflex), otable = document.getElementById(table), otody = otable.tBodies[0], oth = otody.getElementsByTagName("th"), otd = otody.getElementsByTagName("td"), box = document.getElementById("table-draf"), bhead = document.getElementsByClassName('bhead')[0], wrap = document.getElementsByClassName('wrap')[0], tab = document.getElementsByClassName('table-responsive')[0], lf = 0, oxo = '', oyo = '', arrn = []; var timer = setInterval(function() { lf = tab.scrollLeft console.log(lf) otable.style.left = -lf + 'px'; for (var i = 0; i < oth.length; i++) { oth[i].onmousedown = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth, maxl = ochek.offsetWidth - thW, rows = otable.rows, ckL = ochek.offsetLeft, disX = target.offsetLeft, otop = document.body.scrollTop, oxtop = tab.offsetTop, oin = this.cellIndex, _this = this; oxo = this.innerHTML; for (var i = 0; i < rows.length; i++) { var op = document.createElement("p"); if (rows[i].cells[this.cellIndex]) { op.innerHTML = rows[i].cells[this.cellIndex].innerHTML; } box.appendChild(op); }; for (var i = 0; i < oth.length; i++) { arrn.push(oth[i].offsetLeft); }; //console.log(arrn); box.style.display = "block"; box.style.width = thW + "px"; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onmousemove = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onselectstart = function() { return false }; window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty(); } document.onmouseup = function(e) { var e = e || window.event, opr = box.getElementsByTagName("p"), oboxl = e.clientX + lf; for (var i = 0; i < arrn.length; i++) { if (arrn[i] < oboxl) { var index = i; } }; // oyo = oth[index].innerHTML; // oth[index].innerHTML = oxo; // oth[oin].innerHTML = oyo; oyo = oth[index].innerHTML; oth[index].innerHTML = oxo; oth[index].innerHTML = oyo; // console.log(index) // for(var i = 0; i < rows.length; i++) { // rows[i].cells[_this.cellIndex].innerHTML = ""; // rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; // rows[i].cells[index].innerHTML = ""; // rows[i].cells[index].innerHTML = opr[i].innerHTML; // }; for (var i = 0; i < rows.length; i++) { if (rows[i].cells[_this.cellIndex]) { rows[i].cells[_this.cellIndex].innerHTML = ""; rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; }; if (rows[i].cells[index]) { rows[i].cells[index].innerHTML = ""; rows[i].cells[index].innerHTML = opr[i].innerHTML; }; }; box.innerHTML = ""; arrn.splice(0, arrn.length); box.style.display = "none"; document.onmousemove = null; document.onmouseup = null; document.onselectstart = function() { return false }; } } oth[0].onmousedown = function() { return false; } }; }, 10) } </script>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
combogrid显示宽度的问题!求大佬帮忙!

//客户工厂表2 GetCustDetail(); function GetCustDetail() { //库房下拉框数据源绑定 $('#CustFactoryID').combogrid({ panelWidth: 400, idField: 'CustFactoryID', //内码 textField: 'CustFactory', //显示值 根据数据库返回字段进行绑定 mode: 'local', fitColumns: true, columns: [[ { field: 'CustFactoryID', title: '客户工厂ID',width:200}, { field: 'CustFactory', title: '客户工厂名称',width:200 } ]] }); } success: function (data) { //客户工厂2 var dt_Data_One2 = data.Table2; var dt_Data_One_Grid2 = $('#CustFactoryID').combogrid('grid'); dt_Data_One_Grid2.datagrid('loadData', dt_Data_One2); }![图片说明](https://img-ask.csdn.net/upload/201711/08/1510108055_80933.png)

数据库alter table s alter...出错,跪求大佬解答

想用数据库sql语句里的 alter table s alter column SNAME varchar(50); 修改一下s表里SNAME的数据类型,但是提示出错了 ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'varchar(50)' at line 1 但是用 alter table s modify column SNAME varchar(255); 语句就可以实现不懂为什么,我看萨师煊的《数据库系统概论》这本书里用的就是alter table s alter column ....不知道为什么出错,跪求求知道的大佬告诉一下

关于el-table无法渲染的问题,求大佬指教

* 从ElementUI的官网新建了VUE组件,使用这段代码 ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } </script> ``` * * * * * * * * * * * * * * * * * * router里的index文件 ``` import Vue from 'vue' import Router from 'vue-router' import NewFile from '@/components/NewFile' Vue.use(Router) export default new Router({ routes: [ { path: '/NewFile', components: { newfile: NewFile, } } ] }) ``` src下的App.vue和Main.js文件 ``` <template> <div class="container" id="vueApp"> <router-view name="newfile"></router-view> </div> </template> <script> export default { } </script> <style> </style> ``` ``` import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import Table from 'element-ui'; import App from './App' import router from './router' import store from './store' import 'babel-polyfill' Vue.config.productionTip = false Vue.use(ElementUI); Vue.use(Table); /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App), router, store, components: { App }, template: '<App/>' }) ``` package.json里的依赖: ``` "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "element-ui": "^2.13.0", "express": "^4.17.1", "mysql": "^2.17.1", "vue": "^2.5.2", "vue-axios": "^2.1.5", "vue-router": "^3.0.1", "vuex": "^3.1.2" } ``` 单独新建一个VUE项目可以运行,但是在原有这个项目运行无法渲染页面,并弹出以下问题,不知道有无相关 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578300263_899632.png) ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578299380_894423.png) 另外elementUI的其他组件,比如el-form和el-dialog,做登录页时也是单独项目可渲染,但是在这个项目里无法渲染,但是也没有相关报错,求大佬指教

请问各位大佬js怎么自动在table外添加一个div层

``` 请问各位大佬js怎么自动在table外添加一个div层 比如内容里面有<table的时候,自动在前面加一个<div class= ,在 </table>后面自动加一个</div>。没有table的时候就什么都不添加 谢谢大家 ```

类似excel一样拖动选择table单元格的javascript实现

嗯 嗯 我以前主要是搞java server端的编程 javascript用得少,至少用得不深 现在手上有个js任务,完成大部分,也碰到一些问题,目前要做的是,拖动选择table单元格功能,像excel里面选择表格一样,选择后单元格边框颜色变黑,能够任意拖动。 不晓得有js牛人搞过冒有,可以指点下不。 上次30分全部都送出去了,现在想起来,太浪费了,有牛人指点下的话,以后有分再可以给 :D [b]问题补充:[/b] 一楼同学,看不到源码,论坛也去了,没思路啊 [b]问题补充:[/b] 多谢而楼同学 我看了下 自己有了个思路 我已经参考例子有了简单实现,但是有个问题就是, 我的意图是只高亮显示背景颜色变蓝的单元格(见附件图片) 但是table同时会高亮其他相关的单元格,而这些单元格不是我想要的,因为我只想选中规则的矩形区域,其他单元格因为鼠标事件也被选上了。 例子中似乎已经实现了我想要的功能,但是我看了很久代码,没发现时怎么实现的 可否指点下 多谢 恩 分数可能有点少 以后又了肯定补上 多谢了 [b]问题补充:[/b] 也要多谢其他同学的建议,但是我现在不能用其他框架,如jquery之类,项目要求的 多谢大家关注 [b]问题补充:[/b] 搞定了 加了个selectstart事件处理

Layui框架的table的选中行功能,获取选中行数据为空!!有没有大佬帮忙看看啊,查了各种资料都不行!!!

``` <table class="layui-hide" id="user-index" lay-filter="user-index"></table> ``` ``` <script> layui.use(['layer', 'table'], function () { var $ = layui.$ , layer = layui.layer , form = layui.form , table = layui.table; //独立版的layer无需执行这一句 var tableId = 'user-index'; var tableToolbar = 'user-index-toolbar'; var tableSearchForm = 'user-index-search'; var minWidth = 768; // 表格渲染 table.render({ elem: '#' + tableId , toolbar: '#' + tableToolbar , defaultToolbar: ['filter'] // ['filter', 'print', 'exports'] , url: '/User/list' ,where:{'username':'','realname':'','tel':'','city':'','isdelete':0} , method: 'get' , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 , cols: [[ {type: 'checkbox', id:'cb',fixed: 'left'} , {field: 'id', width: 80, title: 'ID', sort: true} , {field: 'username', width: 212, title: '用户名', sort: true} , {field: 'realname', width: 100, title: '姓名'} , {field: 'sex', width: 105, title: '性别'} , {field: 'tel', width: 180, title: '手机号'} , {field: 'city', width: 120, title: '城市', sort: true} , {field: 'role', width: 100, title: '角色ID', sort: true} , { title: '状态', width: 150, templet: function (res) { if (res.status == '1') { return '已激活(使用中)'; } else { return '<span style="color: #F581B1;">冻结(过期请续费)</span>'; } } } ]] , page: true ,limit:7 , height: 'full-60' // 100 }); ``` 头工具栏的监听 ``` table.on('toolbar(' + tableId + ')', function (obj) { var checkStatus = table.checkStatus(obj.config.id) , data = checkStatus.data; console.log(data) //获取选中行的数据 ``` 结果我选中一条或者是多条数据之后都获取不到数据,table的id我也检查过了没问题。 前端控制台输出是这样的: ``` Object data: Array(0) length: 0 __proto__: Array(0) isAll: false __proto__: Object ``` 但是我又试了全选,神奇的发现全选能选择,有没有大佬能帮忙解释下这是什么问题啊,怎么才能解决

需要查询出所有字段,让userId显示,但是只显示一个,求大佬解答一下。

需要查询出所有字段,让userId显示,但是只显示一个,求大佬解答一下 ``` --用户信息表 create table UserInfo ( userId VARCHAR(20) primary key NOT NULL, --用户身份证号 userEmail VARCHAR(50) NOT NULL, --用户邮箱 用于登录 userPwd VARCHAR(20) NOT NULL, --用户密码 registerTime DATETIME NOT NULL, --注册时间 注册时默认当前系统时间 ) go --用户详细信息表 create table UserDetailInfo ( userId VARCHAR(20) NOT NULL, --用户身份证号 外键,关联用户信息表中主键userId userName VARCHAR(50) NOT NULL, --姓名 userPhone VARCHAR(20) NOT NULL, --联系电话 userAddress VARCHAR(100) NOT NULL, --联系地址 ) ``` ``` select top 3* from (select userEmail,userPwd,registerTime,userName,userPhone,userAddress,ROW_NUMBER() OVER(order by userEmail) as RowNo from UserInfo a inner join UserDetailInfo b on a.userId=b.userId)as t1 where RowNo not in(select top 0 RowNo from (select userEmail,userPwd,registerTime,userName,userPhone,userAddress,ROW_NUMBER() OVER(order by userEmail) as RowNo from UserInfo a inner join UserDetailInfo b on a.userId=b.userId)as t2 order by RowNo asc) ```

boostrap-table的拖拽功能只在第一次加载表格时有效?

为什么boostrap-table的拖拽功能只在第一次加载表格时有效,第二次执行就没有用了,boostrap-table.js是用1.10.0版本的

table中拖拽后实现数据交换?

这是我在网上看到的一段实现表格拖拽交换的代码。这里遇到的问题就是,这段好像是文本交换,我想请问,实现id交换也就是说,实现单元格所有数据的交换,应该怎么改动? if (dragedTable_movable) { var event = getEvent(); var x=event.x||event.pageX; var y=event.y||event.pageY; var oTable = document.getElementById(dragedTable_tableId); var pos = new Array(); var posX=0; var posY=0; var td; var rowslength=oTable.rows.length; var cellslength=0; if (dragedTable_preCell != null) { for(var j=1;j<rowslength;j++){ cellslength=oTable.rows[j].cells.length; for (var i = 0; i < cellslength; i++) { td=oTable.rows[j].cells[i]; pos = getPos(td); posX=pos[1]; posY=pos[0]; //计算鼠标位置,是否在某个单元格的范围之内 if (x >posX && x < posX + td.offsetWidth && y > posY && y < posY + td.offsetHeight) { if (oTable.rows[j].cells[i].tagName.toLowerCase() == "td") { //交换文本 dragedTable_preCell.innerHTML = td.innerHTML; td.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML; //清除原单元格和目标单元格的样式 dragedTable_preCell.style.backgroundColor = dragedTable_normalColor; td.style.backgroundColor = dragedTable_normalColor; td.style.cursor = ""; dragedTable_preCell.style.cursor = ""; dragedTable_preCell.style.backgroundColor = dragedTable_normalColor; } } } } } dragedTable_movable = false; //清除提示图层 document.getElementById(dragedTable_movedDiv).style.display = "none"; }

table的多个td列中,分别每列嵌套一个table,如何控制嵌套的多个table的每个行高一致!

目前情况如下图: ![图片说明](https://img-ask.csdn.net/upload/201511/22/1448196964_89001.png) 内容行是由js控制可以动态增、减的。 外面是一个Table,有N个列; 每个列里面嵌套一个Table(每一列其实代表一个字段); 多个嵌套的Table 的行数据是同步增、减的。所以行数肯定是一致的。但是每个字段列内容不一样,可能导致有些嵌套Table 的内容比较多,导致行高比较高,从而引起多个嵌套Table的每行的行高可能会错乱。 大家是否有好的解决方案????? 目前这种布局方式无法改动,所以只能就目前的布局方式寻找好的解决方案。谢谢!

求一个 vue的 vxe-table 手册

如题 求一个 vue的 vxe-table 手册!!!!!!!!!!!!!!!!!!!!!!!!!!!!

求大佬!!!htm里table 表单中插入图片为空怎么解决???

我在table 里面插入行列 以及图片 打印结果到excel里能看见图片的大小 但是图片空白 htm头文件: <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> 插入如下: <tr> <td colspan=21 align="center" valign="top"> <img src="../images/zking_head.jpg" width="200" height="20"/> </td> </tr>

bootstrap table 实现拖拽功能和滚动条功能

比如:1怎么拖拽表格头部,让着一列变宽,然后出现滚动条。 2或者自适应,不要一列的高度过高,出现横向滚动条也可以。 ![图片说明](https://img-ask.csdn.net/upload/201709/06/1504668176_100829.png)

怎么用JS把页面上几张table导到同一个excel文件的不同sheet里?

怎么用JS把页面上几张table导到同一个excel文件的不同sheet里? 下面代码现在不能导到不同的sheet里,只能创建几个空sheet,请问我该怎么改呢? ``` var tablesToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>' , templateend = '</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>' , body = '<body>' , tablevar = '<table>{table' , tablevarend = '}</table>' , bodyend = '</body></html>' , worksheet = '<x:ExcelWorksheet><x:Name>' , worksheetend = '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>' , worksheetvar = '{worksheet' , worksheetvarend = '}' , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) } , wstemplate = '' , tabletemplate = ''; return function (table, name, filename) { var tables = table; for (var i = 0; i < tables.length; ++i) { wstemplate += worksheet + worksheetvar + i + worksheetvarend + worksheetend; tabletemplate += tablevar + i + tablevarend; } var allTemplate = template + wstemplate + templateend; var allWorksheet = body + tabletemplate + bodyend; var allOfIt = allTemplate + allWorksheet; var ctx = {}; for (var j = 0; j < tables.length; ++j) { ctx['worksheet' + j] = name[j]; } for (var k = 0; k < tables.length; ++k) { var exceltable; if (!tables[k].nodeType) exceltable = document.getElementById(tables[k]); ctx['table' + k] = exceltable.innerHTML; } //document.getElementById("dlink").href = uri + base64(format(template, ctx)); //document.getElementById("dlink").download = filename; //document.getElementById("dlink").click(); window.location.href = uri + base64(format(allOfIt, ctx)); } })(); ```

JS innerHTML 问题!!!!!

通过为元素设置innerHTML 但最后在网页显示的时候确实text格式![图片说明](https://img-ask.csdn.net/upload/201607/14/1468463774_238408.png) ![图片说明](https://img-ask.csdn.net/upload/201607/14/1468463787_486925.png)

求大佬! bootstrap-table在没有数据的时候会显示表结构吗

![图片说明](https://img-ask.csdn.net/upload/201711/23/1511437141_570301.png) bootstrap-table在没有数据的时候会显示表结构吗,我的网页为什么直接空白啥也没有..如图有数据了为什么网页还是空白

JAVA 如何用实现table内容向另一table内容的复制。求大神们帮忙解决!

![图片说明](https://img-ask.csdn.net/upload/201611/13/1479012644_579833.png) 就是实现点击→实现内容的传递。点击←删除该行。 但是我实现时却出现了这样的问题。。简单的示例![图片说明](https://img-ask.csdn.net/upload/201611/13/1479012799_283586.png)![图片说明](https://img-ask.csdn.net/upload/201611/13/1479012807_630360.png)![图片说明](https://img-ask.csdn.net/upload/201611/13/1479012815_549808.png) 简单的点击添加值之后,会将之前的全部替换。一头雾水- -。。求大神讲解 简单源码如下。 package com.test; import java.awt.BorderLayout; import java.awt.EventQueue; import java.util.Vector; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.border.EmptyBorder; import javax.swing.table.DefaultTableModel; import javax.swing.JTable; import javax.swing.JButton; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; public class Jtable extends JFrame { private JPanel contentPane; private JTable table; private JButton btnNewButton; /** * Launch the application. */ public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { try { Jtable frame = new Jtable(); frame.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } }); } /** * Create the frame. */ public Jtable() { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setBounds(100, 100, 450, 300); contentPane = new JPanel(); contentPane.setBorder(new EmptyBorder(5, 5, 5, 5)); setContentPane(contentPane); contentPane.setLayout(new BorderLayout(0, 0)); JScrollPane scrollPane = new JScrollPane(table); contentPane.add(scrollPane); Vector columnNames = new Vector(); for(int i=0;i<4;i++){ columnNames.add("第" +(i+1) + "列"); } Vector rowData = new Vector(); Vector data = new Vector(); //开始表中的数据是1,2,3,4 rowData.add("1"); rowData.add("2"); rowData.add("3"); rowData.add("4"); data.add(rowData); //使用DefaultTableModel构建表格 DefaultTableModel tableModel = new DefaultTableModel(data,columnNames); table = new JTable(tableModel); scrollPane.setViewportView(table); btnNewButton = new JButton("New button"); btnNewButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { rowData.add("4"); rowData.add("5"); rowData.add("6"); rowData.add("7"); data.add(rowData); tableModel.setDataVector(data, columnNames); table.setModel(tableModel); } }); scrollPane.setRowHeaderView(btnNewButton); } }

js table问题 简单更改数据

附上代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table id="test" border="1" width="400px"> <tr><td>疯狂Java讲义</td><td>轻量级Java EE企业应用实战</td></tr> <tr><td>疯狂Ajax讲义</td><td>经典Java EE企业应用实战</td></tr> <tr><td>疯狂XML讲义</td><td>疯狂Workflow讲义</td></tr> </table> <script> var tmpIn = document.createElement("input") tmpIn.type= "text"; var curCell; function edit(event) { if(event==null){ curCell = window.event.srcElement;} else{ curCell = event.target;} tmpIn.value = curCell.innerHTML; tmpIn.onblur= end; curCell.innerHTML = ""; curCell.appendChild(tmpIn); } function end() { curCell.innerHTML = tmpIn.value; } document.getElementById("test").ondbclick = edit; </script> </body> </html> ``` 这个javascript代码是不是已经不能用了

求一个编辑TABLE的JAVASCRIPT插件(JQUERY最好)

1.基于Jquery的插件最好 2.页面有一个TABLE对他增加一行,少一行比较好操作的 3.table上的文件一点击就会变成input框,一失去焦点就会又变成文本的. 4.TABLE里的一行数据要异步提交 5.有详细API最好 大家谁有好用的介绍一下啥。。 [b]问题补充:[/b] 自己做肯定没有问题的,我就是想找一个来用啥。 [b]问题补充:[/b] lovewhzlq再介绍几个啥。。还认识我不。。。你还在这回答问题哇。。。

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

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

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

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

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

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

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

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

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

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

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

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

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

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

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

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

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

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

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

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

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

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

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

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

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

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

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问
相关内容推荐