爱问知识人 爱问教育 医院库

如何利用JS代码实现拖动表格行改变顺序呢?

首页

如何利用JS代码实现拖动表格行改变顺序呢?

如何利用JS代码实现拖动表格行改变顺序呢?

提交回答

全部答案

    2018-10-27 23:12:57
  •   html xmlns=http://www。w3。org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title拖拽表格的行-学无忧(www。
      xue51。com)/titlestyle type=text/csstd{position:relative;}body {margin-left: 1px;margin-top: 1px;margin-right: 1px;margin-bottom: 1px;}/style/headbody style=margin-left:0px; margin-top:0px;table width=301 border=1 bordercolor=#CCCCCC id=dragTbltr td width=73序号/td td width=52姓名/td td width=65年龄/td td width=83地址/td/trtr td width=731/td td width=52张三/td td width=6522/td td width=83北京海淀/td/tr tr td 2/td td王五/td td24/td td上海浦东/td /tr tr td3/td td朝气/td td24/td td广州深圳/td /tr/tablescript language=javascript var obj;var xx=0,yy=0;var tagobj;var dragobj;function draginit(){var tblRows = document。
      getElementsByTagName(TR); //获取所有的表格行for(var i=0;itblRows。length;i++){ //遍历每一行if((tblRows[i]。parentNode。parentNode。id)。toString()。
      indexOf(drag)!=-1){tblRows[i]。onmousedown=mousedown; //绑定所有的鼠标事件tblRows[i]。ondragover=dragover;tblRows[i]。ondragend=dragend;tblRows[i]。
      ondrag=dragmove;tblRows[i]。style。position=relative;tblRows[i]。style。zIndex=1;}}}function mousedown(){ //鼠标按下时的处理obj = event。
      srcElement;if(obj。tagName==TD) obj=obj。parentNode; //如果是单元格if(obj。tagName!=TR) return false; //如果是单元行if(obj。rowIndex==0) return false; //如果是标题yy=event。
      clientY; //鼠标的x坐标和y坐标xx=event。clientX;obj。style。zIndex=0;try{obj。dragDrop();}catch(e){}}function dragmove(){ //表格拖拽移动时的位置获取obj。
      style。top = event。clientY-yy;obj。style。left = event。clientX-xx;}function dragover(){ //鼠标拖动时的操作tagobj=event。srcElement;if(tagobj。
      tagName==TD){tagobj=tagobj。parentNode;}//如果是单元格if(tagobj。tagName!=TR)return false; //如果是单元行}function dragend(){ //拖拽完毕后的处理-高度,宽度等obj。
      style。top=0;obj。style。left=0;obj。style。zIndex=1;if(tagobj!=null tagobj。rowIndex!=0){var t1=dragTbl。rows[obj。rowIndex];var t2=dragTbl。
      rows[tagobj。rowIndex];dragTbl。getElementsByTagName('tbody')[0]。insertBefore(obj,tagobj);//实现表格单元行的互换tagobj。style。zIndex=1;}tagobj=null;}draginit(); //初始化拖拽操作/script/body/html。
      

    悲***

    2018-10-27 23:12:57

类似问题

换一换

相关推荐

正在加载...
最新问答 推荐信息 热门专题 热点推荐
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200

热点检索

  • 1-20
  • 21-40
  • 41-60
  • 61-80
  • 81-100
  • 101-120
  • 121-140
  • 141-160
  • 161-180
  • 181-200
返回
顶部
帮助 意见
反馈

确定举报此问题

举报原因(必选):