请问怎么样将一个table的行拖到另一个table上去?

cansum396 2009-01-05 10:33:25
一个页面上有两个结构一样的table
我想拖动table1的某行到table2里
...全文
324 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
cansum396 2009-01-12
  • 打赏
  • 举报
 回复
搞定结贴
cansum396 2009-01-08
  • 打赏
  • 举报
 回复
没人?
varlj 2009-01-05
  • 打赏
  • 举报
 回复
大概写了一下，根据需要再慢慢改吧



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>无标题文档</title>

</head>

<body>

<table border="1" id="tab1" width="400">

	<tr>

		<td>111</td>

		<td>222</td>

		<td>333</td>

	</tr>

	<tr>

		<td>1111</td>

		<td>2222</td>

		<td>3333</td>

	</tr>

	<tr>

		<td>11111</td>

		<td>22222</td>

		<td>33333</td>

	</tr>

	<tr>

		<td>111111</td>

		<td>222222</td>

		<td>333333</td>

	</tr>

</table>

<table border="1" id="tab2" width="400">

	<tbody>

	<tr>

		<td>aaa</td>

		<td>bbb</td>

		<td>ccc</td>

	</tr>

	<tr>

		<td>aaaa</td>

		<td>bbbb</td>

		<td>cccc</td>

	</tr>

	<tr>

		<td>aaaaa</td>

		<td>bbbbb</td>

		<td>ccccc</td>

	</tr>

	<tr>

		<td>aaaaaa</td>

		<td>bbbbbb</td>

		<td>cccccc</td>

	</tr>

	</tbody>

</table>

<script type="text/javascript">

var floatDiv = null;

var floatRow = null;

var oft = null;

function $(id)

{

	return document.getElementById(id);

}

function $c(tag,ct)

{

	var el = document.createElement(tag);

	if(ct)

		ct.appendChild(el);

	return el;

}



//取得节点位置

function getDomOffset(el)

{

	for(var lx=0,ly=0;el!=null; el=el.offsetParent)

	{

		lx+=el.offsetLeft;

		ly+=el.offsetTop;

	}   

	return   {x:lx,y:ly}   

}



//取得节点矩形大小，不是很精确，不过差不多可以用了

function getRect(el)

{

	var pos = getDomOffset(el);

	return {

		x:pos.x,

		y:pos.y,

		cx:el.clientWidth,

		cy:el.clientHeight

	}

}



//鼠标是否在矩形内

function ptInRect(pt,rect)

{

	return pt.x>rect.x && pt.x<rect.x+rect.cx && pt.y>rect.y && pt.y<rect.y+rect.cy;

}



//取得鼠标位置

function getMouse(ev)

{

     if(ev.pageX || ev.pageY)

     {         

          return {x:ev.pageX, y:ev.pageY};

     }

     return {         

          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 

          y:ev.clientY + document.body.scrollTop  - document.body.clientTop     

     }; 

} 



//鼠标按下事件处理函数

function down()

{

	var evt = window.event || arguments[0];

	var el = evt.srcElement || evt.target;

	if( el.tagName.toLowerCase() != "td" )

		return;

	

	floatRow = el.parentNode;

	var pos = getDomOffset(floatRow);

	var mouse = getMouse(evt);

	oft = {

		x:mouse.x - pos.x,

		y:mouse.y - pos.y

	};

	floatDiv = $c("div",document.body);

	floatDiv.style.width = floatRow.clientWidth + "px";

	floatDiv.style.height = floatRow.clientHeight + "px";

	floatDiv.style.border = "dotted 2px #b45";

	floatDiv.style.left = pos.x + "px";

	floatDiv.style.top = pos.y + "px";

	floatDiv.style.position = "absolute";

}



//鼠标抬起事件处理函数

function up()

{

	if(floatDiv)

	{

		document.body.removeChild(floatDiv);

		floatDiv = null;

	}

		

	var evt = window.event || arguments[0];

	var rect = getRect( $("tab2") );

	var mouse = getMouse(evt);

	if( ptInRect(mouse,rect) )

	{

		//要第一个表格那里，选中的行不消失，就用下面这语句

		//$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );

		//下面的语句会删除第一个表格中的行

		$("tab2").tBodies[0].appendChild( floatRow );

	}

}



//鼠标移动事件处理函数

function move()

{

	if(floatDiv)

	{

		var evt = window.event || arguments[0];

		var pos = getMouse(evt);

		floatDiv.style.left = pos.x - oft.x + "px";

		floatDiv.style.top = pos.y - oft.y + "px";

	}

}



window.onload = function()

{

	document.body.onmousedown = down;

	document.body.onmouseup = up;

	document.body.onmousemove = move;

}

</script>

</body>

</html>
杨哥儿 2009-01-05
  • 打赏
  • 举报
 回复
AJAX可以实现这个功能.我见过!!
但代码我不会.
dayizhixiaotutu 2009-01-05
  • 打赏
  • 举报
 回复
Up
selad 2009-01-05
  • 打赏
  • 举报
 回复
我晕 这个貌似很难
去研究下表格排序
Sortable.create("list");//排序表格
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
<table id='t1'>
<tr id='tr1'>
<td>拖动我</td>
</tr>
</table>

<table id='t2'>
<tr id='tr2'>
<td>我在这</td>
</tr>
</table>

把tr1拖到t2,并在t2上增加tr1的内容
ximizhi 2009-01-05
  • 打赏
  • 举报
 回复
拖动后直接就进入了table2了吗？？
summer0214 2009-01-05
  • 打赏
  • 举报
 回复
怎么拖动，需要什么样的功能？
空心兜兜 2009-01-05
  • 打赏
  • 举报
 回复
学习下
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
拿JK大虾的源代码改了下,基本上实现了我要的功能


<html>   

  <head>   

  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   

  <title>JK:支持民族工业,尽量少买X货</title>   

  <style>   

  .removableObj   

  {   

  height:25;position:relative;   

  }   

  </style>   

  <script   language="javascript">   

  var   beginMoving=false;   

  var   sourceObj=null;   

  var   objectObj=null;   

  var   objectObj2=null;   

  function   MouseDownToMove(obj){   

  obj.style.zIndex=1;   

  obj.mouseDownY=event.clientY;   

  obj.mouseDownX=event.clientX;   

  beginMoving=true;   

  obj.setCapture();   

  sourceObj=obj;   

  objectObj=null;   

  }   

    

  function   MouseMoveToMove(obj){   

          if(!beginMoving)   return   false;   

  obj.style.top   =   (event.clientY-obj.mouseDownY);   

  obj.style.left   =   (event.clientX-obj.mouseDownX);   

  }   

  function   MouseUpToMove(obj){   

  if(!beginMoving)   return   false;   

  obj.releaseCapture();   

  obj.style.top=0;   

  obj.style.left=0;   

  obj.style.zIndex=0;   

  beginMoving=false;   

  window.setTimeout("swapFun()",20);   

  }   

    

  function   MouseOverFun(obj)   

  {   

  if(obj==sourceObj)   return   false;   

  objectObj=obj;   

  }   

    

  function   MouseOverFun2(obj)   

  {   

  objectObj2=obj;   

  }   

    

  function   swapFun() {

      //if (objectObj == null) return false;

      if (sourceObj == objectObj2) {

          sourceObj = null;

          objectObj = null;

          objectObj2 = null;

          beginMoving = false;

      }

  if(sourceObj!=null   &&   objectObj!=null)   objectObj.parentNode.insertAdjacentElement("beforeBegin",sourceObj);

  else if (sourceObj != null && objectObj2 != null) objectObj2.parentNode.insertAdjacentElement("beforeEnd", sourceObj);   

  

  sourceObj=null;   

  objectObj=null;

  objectObj2 = null;

  beginMoving = false;

  }   

  </script>   

  </head>   



  <body>   

    

               <table   border="1"   width="40%"   bgcolor="#99CCFF"   align='left' >   

                  <tr  onmouseover='MouseOverFun2(this);'   class='removableObj'   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">和</td>   

                      <td   width="21%">飞过海</td>   

                  </tr>   

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">　</td>   

                      <td   width="21%">　</td>   

                  </tr>

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">和1</td>   

                      <td   width="21%">飞过海1</td>   

                  </tr>

                  <tr  onmouseover="MouseOverFun2(this);"   class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="23%">A　</td>   

                      <td   width="21%">B　</td>   

                  </tr>

              </table>



      <table   border="1"   width="40%"   bgcolor="#FF9966"    >   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">还是</td>   

                      <td   width="35%">护身符哈</td>   

                      <td   width="21%">　</td>   

                      <td   width="23%">呵呵</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">，</td>   

                      <td   width="35%">和是是护</td>   

                      <td   width="21%">　</td>   

                      <td   width="23%">和</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">还是1111</td>   

                      <td   width="35%">护身符哈sfds</td>   

                      <td   width="21%">　fsdafsaf1`</td>   

                      <td   width="23%">呵呵32edfdsfdsaf</td>   

                  </tr>   

                  <tr onmouseover="MouseOverFun2(this);"  class="removableObj"   onmousedown='MouseDownToMove(this)'   onmousemove='MouseMoveToMove(this)'   onmouseup='MouseUpToMove(this);'   onmouseover="MouseOverFun(this);" >   

                      <td   width="21%">213ewfdsfc，</td>   

                      <td   width="35%">和是是护fdsafdsaf</td>   

                      <td   width="21%">　fdsafdasf</td>   

                      <td   width="23%">和fdsafdds</td>   

                  </tr>                     

              </table>           



  </body>   

  </html>


现在的问题是怎么样把拖动的行放到停靠行的后面?而不是在最后加一行
zzxap 2009-01-05
  • 打赏
  • 举报
 回复
花耍的东西
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
而且这两个表自己的行也可以交换
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
如果我要将两个表的行互相拖来拖去呢?
varlj 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 czp0608 的回复:]
怎么没用？？？
[/Quote]

我测试了IE7和FF3，都可以用啊
估计我声明的是UTF-8，你看看是不是把编码搞错了，里面的注释是中文的，编码错了就出错了
varlj 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 cansum396 的回复:]
不错
但floatDiv怎么能够与floatRow 一模一样呢?
[/Quote]

大概，把down函数这样改一下吧


function down()

{

	var evt = window.event || arguments[0];

	var el = evt.srcElement || evt.target;

	if( el.tagName.toLowerCase() != "td" )

		return;

	

	floatRow = el.parentNode;

	var pos = getDomOffset(floatRow);

	var mouse = getMouse(evt);

	oft = {

		x:mouse.x - pos.x,

		y:mouse.y - pos.y

	};

	floatDiv = $c("div",document.body);

	//floatDiv.style.width = floatRow.clientWidth + "px";

	//floatDiv.style.height = floatRow.clientHeight + "px";

	//floatDiv.style.border = "dotted 2px #b45";

	floatDiv.style.left = pos.x + "px";

	floatDiv.style.top = pos.y + "px";

	floatDiv.style.position = "absolute";

	var tab = $("tab1").cloneNode(false);

	var tbd = $c("tbody",tab);

	tbd.appendChild(floatRow.cloneNode(true));

	floatDiv.appendChild(tab);//在up里，你要愿意，就把floatDiv清空一下，不清空也不会出错

}
不悲不喜 2009-01-05
  • 打赏
  • 举报
 回复
给楼上的代码修饰一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

    </head>

    <body>

		<table border="1" id="tab1" width="400">

		    <tr>

		        <td>111</td>

		        <td>222</td>

		        <td>333</td>

		    </tr>

		    <tr>

		        <td>1111</td>

		        <td>2222</td>

		        <td>3333</td>

		    </tr>

		    <tr>

		        <td>11111</td>

		        <td>22222</td>

		        <td>33333</td>

		    </tr>

		    <tr>

		        <td>111111</td>

		        <td>222222</td>

		        <td>333333</td>

		    </tr>

		</table>

		<table border="1" id="tab2" width="400">

		    <tbody>

		    <tr>

		        <td>aaa</td>

		        <td>bbb</td>

		        <td>ccc</td>

		    </tr>

		    <tr>

		        <td>aaaa</td>

		        <td>bbbb</td>

		        <td>cccc</td>

		    </tr>

		    <tr>

		        <td>aaaaa</td>

		        <td>bbbbb</td>

		        <td>ccccc</td>

		    </tr>

		    <tr>

		        <td>aaaaaa</td>

		        <td>bbbbbb</td>

		        <td>cccccc</td>

		    </tr>

		    </tbody>

		</table>

		

        <script type="text/javascript">

            var floatDiv = null;

            var floatRow = null;

            var oft = null;

            function $(id){

                return document.getElementById(id);

            }

            

            function $c(tag, ct){

                var el = document.createElement(tag);

                if (ct) 

                    ct.appendChild(el);

                return el;

            }

            

            //取得节点位置

            function getDomOffset(el){

                for (var lx = 0, ly = 0; el != null; el = el.offsetParent) {

                    lx += el.offsetLeft;

                    ly += el.offsetTop;

                }

                return {

                    x: lx,

                    y: ly

                }

            }

            

            //取得节点矩形大小，不是很精确，不过差不多可以用了

            function getRect(el){

                var pos = getDomOffset(el);

                return {

                    x: pos.x,

                    y: pos.y,

                    cx: el.clientWidth,

                    cy: el.clientHeight

                }

            }

            

            //鼠标是否在矩形内

            function ptInRect(pt, rect){

                return pt.x > rect.x && pt.x < rect.x + rect.cx && pt.y > rect.y && pt.y < rect.y + rect.cy;

            }

            

            //取得鼠标位置

            function getMouse(ev){

                if (ev.pageX || ev.pageY) {

                    return {

                        x: ev.pageX,

                        y: ev.pageY

                    };

                }

                return {

                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

                    y: ev.clientY + document.body.scrollTop - document.body.clientTop

                };

            }

            

            //鼠标按下事件处理函数

            function down(){

                var evt = window.event || arguments[0];

                var el = evt.srcElement || evt.target;

                

                if (el.tagName.toLowerCase() != "td") 

                    return;

                

                floatRow = el.parentNode;

                var pos = getDomOffset(floatRow);

                var mouse = getMouse(evt);

                

                oft = {

                    x: mouse.x - pos.x,

                    y: mouse.y - pos.y

                };

                

                floatDiv = $c("div", document.body);

                floatDiv.style.width = floatRow.clientWidth + "px";

                floatDiv.style.height = floatRow.clientHeight + "px";

                floatDiv.style.border = "dotted 2px #b45";

                floatDiv.style.left = pos.x + "px";

                floatDiv.style.top = pos.y + "px";

                floatDiv.style.position = "absolute";

                

                var str = '<table border="1" id="tab1" width="400">';

                str += floatRow.outerHTML;

                str += '</table>';

                

                floatDiv.innerHTML = str;

            }

            

            //鼠标抬起事件处理函数

            function up(){

                if (floatDiv) {

                    document.body.removeChild(floatDiv);

                    floatDiv = null;

                }

                

                var evt = window.event || arguments[0];

                var rect = getRect($("tab2"));

                var mouse = getMouse(evt);

                if (ptInRect(mouse, rect)) {

                    //要第一个表格那里，选中的行不消失，就用下面这语句

                    //$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );

                    //下面的语句会删除第一个表格中的行

                    $("tab2").tBodies[0].appendChild(floatRow);

                }

            }

            

            //鼠标移动事件处理函数

            function move(){

                if (floatDiv) {

                    var evt = window.event || arguments[0];

                    var pos = getMouse(evt);

                    floatDiv.style.left = pos.x - oft.x + "px";

                    floatDiv.style.top = pos.y - oft.y + "px";

                }

            }

            

            window.onload = function(){

                document.body.onmousedown = down;

                document.body.onmouseup = up;

                document.body.onmousemove = move;

            }

        </script>

    </body>

</html>
NickCheng 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 varlj 的回复:]
大概写了一下，根据需要再慢慢改吧

HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>无标题文档</title></head><body><tableborder="1"id="tab1"width="400"><tr><td>111</td><td>222</td><td>333</td></t…
[/Quote]
怎么没用？？？
cansum396 2009-01-05
  • 打赏
  • 举报
 回复
不错
但floatDiv怎么能够与floatRow 一模一样呢?
Map-Punctuation-Tool:地图标点工具：一个能将海量经纬度坐标在地图上标出来的小工具，只有12MB，借用了百度的API，以网页的形式呈现
地图标点工具 Map Punctuation Tool 如果您觉得软件对您有所帮助，点一下右上角的star并推荐给周围的朋友就是对我极大的支持。(●'◡'●) 地图标点工具：一个能将海量经纬度坐标在地图上标出来的小工具，只有12MB，借用了百度的API，以网页的形式呈现。 Table of Contents 内容列表 Usage 使用说明 步骤1：首先将execl文件处理成以下格式，并另存为“.xlsx”格式。 注意：第一行必须分别是longitude（经度）和latitude（维度）。 步骤2：打开index.html 步骤3：将右边的滚动条拖到最下面就能看到文件载入的入口了。数据载入之后可以再把滚动条拖上去，这样整个页面会好看一点。 注意：想要把整个页面往下拖只能通过右边的滚动条。鼠标的滚轮是用来放大或缩小地图的。 步骤4：在显示结果之前，网页会弹出第一条读取到的数据。这是用来测试排版
虚拟 DJ 混音器 Virtual DJ
虚拟DJ 想到DJ，大家一定会想到那个在DJ台上挥汗如雨，制造者各种极具震憾力的音乐的人，是不是也想上去过把瘾呢？但一般人很难有机会接触那些昂贵的器材。笔者在这儿向大家推荐Atomix Virtual DJ，有了它我们不用购买任何器材和唱碟，只要利用MP3音乐，就可以用电脑演奏出几近专业的混音效果。 初窥VirtualDJ 　　由于VirtualDJ的主界面功能按钮繁多，笔者为了便于向大家做介绍，将主界面分为五个区即：“Active Waveform（活动波形区）” 、“Left Desk（左唱盘区）”、“Mix Table（混音面板）”、“Right Desk（右唱盘区）” 及“Main Window（主窗口）”（如图1）。下面让我们先了解下这几个区域的主要功能吧。 　　“Active Waveform”窗口以波浪纹来显示播放歌曲的节奏；“Left Desk（左唱盘）” 和“Right Desk（右唱盘）”顾名思义是用来放入音乐的，把音乐文件拖放到相应唱盘上再点击“Play（播放）”按钮即可开始播放。“Mix Table”（混音面盘）提供了各种混音效果；“Main Window”则会根据你的选择，显示你的现有曲目或者各种音乐效果等信息。 　　仅仅播放并不能体现VirtualDJ的神奇，添加歌曲后，我们就可以放开手脚做一些效果了。点击唱盘下方"Beatlock（锁拍）"按钮，它将激活VirtualDJ的Beatlock功能。接着分别可以按下左右两端唱盘下方的"PLAY"按钮，现在两首曲子将同时演奏，VirtualDJ将使它们保持同步播放。要想完成两首歌曲互串的效果，可以平滑地拖动位于“混音面盘”下方的“Crossfader（交叉音控器）”滑块，块向左移动时音乐会逐渐的从右边淡出，缓缓地进入左边。反之亦然，相当的有趣。 是不是还少了点什么呢？对，真正的DJ应该还有“擦盘”的操作，“擦盘”就是指DJ用手按住唱盘来回移动造成一种特别的噪音。咱也不能含糊，赶快把鼠标放置到唱片上试试看。按下鼠标音乐会暂停，来回摩擦唱片就会发出仿真的“擦盘”声效，怎么样，够炫吧！掌握了以上的技法后，你已经向DJ更进一步了。 添加其他效果 　　VirtualDJ能让我们添加更多的效果来个性化你的音乐，在“Mix Table（混音面盘）”区域有四个按钮，分别提供了不同的效果，比如单击第二个按钮,下方就会显示出Loop特效设置区，这里我们可以选择多种Loop添加到音乐中，利用这一功能可为音乐增加声音、弦乐、颤音、噪音等特殊音效。单击第三个按钮，就会切换到特殊效果的调节界面，我们在这儿就可以利用“chan1”和“chan2” 这两个区下的三个按钮对左右两边的音乐进行“Beat grid 、Vocals+、TK Filter V2”等特效的调节（如图2）。至于每个特效代表了什么效果，还是留给大家自己去探索吧！ 　　VirtualDJ笔者就大致介绍到这里，混音虽然好玩，但要想混好，还真不容易。有兴趣的朋友可以多多练习，多掌握一些混音知识与规则，混出一首极具个性的音乐可是一件非常有成就感的事哦！现在就让音乐响起来，让我们动起来吧！ 1.本软件集合多款CD机皮肤面板 2.可以录制自己做的串烧
BootStrapTable表格利器通用教材
适用人群开发从业人员，产品原型人员，IT相关从业人员，想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言动态列：导出各种格式（支持xls，xlsx的office2003-office2019）
css笔记课程笔记2019，5，22
day02 昨天内容回顾 1、html的操作思想 ** 使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化 *** 2、图像标签 ** 通过html访问本地图片，使用绝对路径，目前有问题 3、超链接标签 4、表格标签 ** 技巧：数里面有多少行，每行里面有多少个单元格 ** <table>table> 5、表单标签 ** <form></form> - action method enctype - method: get post ** 输入项 *** 有name属性 * 普通输入项 type="text" * 密码： password * 单选：radio - name值相同 - value值 * 复选框：checkbox - name值相同 - value值 * 下拉框 select option * 文本域 textarea * 隐藏项：type="hidden" * 文件： type="file" * 提交按钮 type="submit" * 重置 ： reset * 使用图片提交： <input type="image" src=""/> * 普通按钮 type="button" 6、div和span * div: 自动换行 * span：在一行显示 CSS 1、css的简介 * css： 层叠样式表 ** 层叠：一层一层的 ** 样式表： 很多的属性和属性值 * 是页面显示效果更加好 * CSS将网页内容和显示样式进行分离，提高了显示功能。 2、css和html的结合方式（四种结合方式） （1）在每个html标签上面都有一个属性 style，把css和html结合在一起 -
一个标签实现 <style>标签，写在head里面 * <style type="text/css"> css代码; </style> * <style type="text/css"> div { background-color:blue; color: red; } </style> （3）在style标签里面 使用语句（在某些浏览器下不起作用） @import url(css文件的路径); - 第一步，创建一个css文件 <style type="text/css"> @import url(div.css); </style> （4）使用头标签 link，引入外部css文件 - 第一步 ，创建一个css文件 - <link rel="stylesheet" type="text/css" href="css文件的路径" /> *** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式 *** 优先级（一般情况） 由上到下，由外到内。优先级由低到高。 *** 后加载的优先级高 *** 格式 选择器名称 { 属性名：属性值；属性名：属性值；…….} 3、css的基本选择器（三种） ** 要对哪个标签里面的数据进行操作 （1）标签选择器 * 使用标签名作为选择器的名称 div { background-color:gray; color:white; } （2）class选择器 * 每个html标签都有一个属性 class -
aaaaaaa
- .haha { background-color: orange; } （3）id选择器 * 每个html标签上面有一个属性 id -
bbbbb
- #hehe { background-color: #333300; } *** 优先级 style > id选择器 > class选择器 > 标签选择器 4、css的扩展选择器 （1）关联选择器 *

wwwwwwww

* 设置div标签里面p标签的样式，嵌套标签里面的样式 * div p { background-color: green; } （2）组合选择器 *
1111

22222

* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式 * div,p { background-color: orange; } （3）伪元素选择器(了解，浏览器的兼容性比较差) * css里面提供了一些定义好的样式，可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ** 记忆的方法 lv ha 5、css的盒子模型 ** 在进行布局前需要把数据封装到一块一块的区域内（div） （1）边框 border: 2px solid blue; border：统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right （2）内边距 padding:20px; 使用padding统一设置 也可以分别设置 上下左右四个内边距 （3）外边距 margin: 20px; 可以使用margin统一设置 也可以分别设置 上下左右四个外边距 6、css的布局的漂浮(了解) float： ** 属性值 left :　 文本流向对象的右边 right :　 文本流向对象的左边 7、css的布局的定位（了解） position： ** 属性值 - absolute ： *** 将对象从文档流中拖出 *** 可以是top、bottom等属性进行定位 - relative ： *** 不会把对象从文档流中拖出 *** 可以使用top、bottom等属性进行定位 8、案例 图文混排案例 ** 图片和文字在一起显示 9、案例 图像签名 ** 在图片上面显示文字 10、上午内容总结 1、css和html的四种结合方式（****） 2、css的基本选择器（****） * 标签选择器 使用标签名 * class选择器 .名称 * id选择器 #名称 ** 优先级 style > id > class > 标签 3、css的扩展选择器(了解) * 关联选择器 - 设置嵌套标签的样式 div p {} * 组合选择器 - 不同的标签具有相同的样式 div,p{} * 伪元素选择器 * 超链接的状态 - 原始 :link - 悬停 :hover - 点击 :active - 点击之后 :visited 4、盒子模型(了解) * 边框 border:2px solid red; 上下左右 border-top border-bottom border-left border-right * 内边距 padding:20px 上下左右 * 外边距 margin:20px 上下左右 * 对数据进行操作，需要把数据放到一个区域里面（div） 5、布局的漂浮(了解) float - left: 后面的div到右边 - right：后面的div到左边 6、布局的定位(了解) position - absolute ** 从文档流中拖出 - relative ** 不会从文档流中拖出 一般在目录里面，标出符号 （********）：重点，代码看懂，代码会写，代码理解 - （****重点中的重点***） （了解）：代码看懂 （理解）：能够把原理讲清楚
element-table横滚轴固定显示
element-table横滚轴固定显示 问题描述： 最近用elementui中的el-table组件，因为表格中的列比较多，所以表格会有横滚轴，这问题就来了。如果我想看拖动横滚轴的话，我必须要将页面拖到表格底部，再拖动横滚轴，然后再将页面滚到上面查看被遮挡的信息。。。 设想： 如果当数据表的数据超出窗口显示区域时，横滚轴固定显示到可视区域的底部，那就方便多了。 解决思路： 从网上看他们是这么解决的： el-table外层加一个div，table设置足够宽，利用div代替el-table的滚轴，然后。
JavaScript

87,914

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章