js 操作table之 移动TR位置 兼容FF 跟 IE

js操作table之 移动TR位置 兼容FF 跟 IE

var mousePos;
function Up_Move(obj){
try{
if(document.all){
document.getElementById('show_input').style.top = mousePos.y
document.getElementById('show_input').style.left = mousePos.x
}else{
document.getElementById('show_input').style.top = mousePos.y+"px";
document.getElementById('show_input').style.left = mousePos.x+"px";
}
}catch(e){}
show_input_div();
document.getElementById("shuzhitijiao").onclick=function(){
var move_no=document.getElementById("move_no").value;
move_no=parseInt(move_no);
if(move_no==""||isNaN(move_no)){
alert("请输入要移动的位数");
document.getElementById("move_no").focus();
return;
}
hidden_input_div();
var table_obj,tr_obj,tr_move_obj;
tr_obj=obj.parentNode.parentNode;
table_obj=tr_obj.parentNode;
for(var i=0;i

0){
if(i0){
if(table_obj.childNodes.length-i-2

body {
margin:0;
padding:0;
font-size:12px;
}
#show_input {
background:#CCCCCC;
position:absolute;
width:200px;
height:100px;
/* top:100px;
left:500px;*/
display:none;
padding:10px;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}

  • 请输入所要移动的位数
上移1 下移
上移2 下移
上移3 下移
上移4 下移
上移5 下移
上移6 下移
上移7 下移
上移8 下移
上移9 下移
上移10 下移

function mouseposition(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}
}
var showContent = document.getElementById('showContent').getElementsByTagName('a')
for(i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 通过js动态操作table(新增，删除相关列信息)

    1.取得table对象 var objTable=document.getElementById( "tb_visitor" ); 2.新增一行 var objTempRow = objTable.rows[0]; //取得模板行 var objNewRow = objTable.insertRow( objTable.rows.length ); objNewRow.id = objTable.rows.length-1; //添加一行的相关信息 for ( var i=0 ; i

  • JS小功能(操作Table--动态添加删除表格及数据)实现代码

    JS小功能(操作Table--动态添加删除表格及数据)实现代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        tr        {            height: 30px;        }    </style>    <script type="text/javascript">   

  • js操作table示例(个人心得)

    js操作table示例(个人心得)

    记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 .当时我从学校出来,js知识只是知道一些,根本做不到!现在想想,其实这个问题也还是考基础功夫是否扎实!大家有兴趣可以自己做做看,测下自己是不是能够做出来.题目的截图:  现在做这个问题,看起来简单,但我还是花了很长时间,可能是我的思路不对吧?主要就是用js来操作html,我现在实现了添加行,删除行,添加列,删除列 ,但合并单元格却不能完整的实现

  • js 操作table之 移动TR位置 兼容FF 跟 IE

    js操作table之 移动TR位置 兼容FF 跟 IE var mousePos; function Up_Move(obj){ try{ if(document.all){ document.getElementById('show_input').style.top = mousePos.y document.getElementById('show_input').style.left = mousePos.x }else{ document.getElementById('show_in

  • js操作table中tr的顺序实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了目标行再直接加进去,最后把整体的html赋值给div完成效果 js代码如下 //使行向上一行 function setRowUp(obj) { if (obj.parentNode.parentNode.rowIndex != 1) { var tab = obj.parentNode.parent

  • js操作table元素实现表格行列新增、删除技巧总结

    本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

  • js操作XML文件的实现方法兼容IE与FireFox

    最近项目中用到了xml,需求是用户安装产品时先把一系列的数据保存到xml文件中,当执行到最后一步时才写入数据库,这样最大限度的减少了数据库的访问,于是不得不纠结在各浏览器的兼容性的问题(悲哀啊....) 进入正文 下面是一个xml文件 (createInstal.xml) <?xml version="1.0" encoding="utf-8"?> <info> <Item> <id descrption="级别&

  • js离开或刷新页面检测(且兼容FF,IE,Chrome)

    复制代码 代码如下: <!DOCTYPE html><html><head><script>  function closeIt()  {    return "Any string value here forces a dialog box to \n" +          "appear before closing the window.";  }  window.onbeforeunload = close

  • JS实现table表格内针对某列内容进行即时搜索筛选功能

    JS实现table表格内针对某列内容进行即时搜索筛选功能

    本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能.分享给大家供大家参考,具体如下: 往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意. 实现如下,先看效果图, 开始状态: 在输入框内输入'e',表格即

  • Js获取table当前tr行的值的代码

    下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

  • js实现table添加行tr、删除行tr、清空行tr的简单实例

    如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

  • js中获取 table节点各tr及td的内容简单实例

    <table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>

随机推荐