用JS将一个table分解成两个table??

var table1=document.getElementById('t1');
var tbody = document.createElement('table');
table1.appendChild(tbody);

<body>
<div id=taFa>
<table width="200" border="1" id=ta>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</div>
</body>
<button onClick="f()"></button>
<script>
function f(){
var tr=ta.rows[0]
tr.id="currTr"
var oHTML=tr.outerHTML
var re=new RegExp(oHTML)
var str=ta.outerHTML
str=str.replace(/<tr(.|\n)*?id=currTr(.|\n)*?<\/tr>/i,oHTML+"</table><table border=1>")
taFa.innerHTML=str
alert(taFa.innerHTML)
}
</script>

基本上是这个原理了,其他办法不用想了,只能重新生成table.不可能插入的扫尾工作自己作了,比如移除tr的id

直接加TR和TD倒可以，但好像不能直接插一些标记如</table>这样，要重写table，我以前记得遇到过这问题。

这个问题，想想只有ldy9929这种方法可行了，用createElement这种方法是不可行，只有用正则替换才可以，要么就是重新生成HTML的内容页面。

var table1 = document.getElementById("t1");
//cutTable方法参数1:要被切分的table实例参数2:准备在第几行开始切分最小为1 参数3(可选):新table的id
function cutTable(table,srow,newid)
{
if(isNaN(srow))return;
srow = parseInt(srow);
srow = srow<1?1:srow;
srow = table.rows.length>srow?srow:(table.rows.length-1);
var newtable = table.cloneNode(false);
var tbody = newtable.appendChild(document.createElement("tbody"));
table.id = newid?newid:(table.id+"_cut");
table.parentNode.insertBefore(newtable,table);
for(var i=0;i<srow;i++)
tbody.appendChild(table.rows[0]);
}
window.onload = function()
{
cutTable(table1,2);
}

<!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>shawl.qiu template</title>
</head>
<body>
<table id= "t1">
<tr>
  <td>
   0
  </td>
</tr>

<tr>
  <td>
   1
  </td>
</tr>

<tr>
  <td>
   2
  </td>
</tr>

<tr>
  <td>
   3
  </td>
</tr>

<tr>
  <td>
   4
  </td>
</tr>

</table>
<script type="text/javascript">
/*<![CDATA[*/

fTableCuter("t1", [1, 2, 3])

function fTableCuter(TblEle, IndexAr)
{
  TblEle = fSetObject(TblEle);
  if(IndexAr.length===0) return;
  fOrderArray(IndexAr, 3);

  var TblSet = [];
  var TblSetCount = 0;

  var RowsLen = TblEle.rows.length;
  if(RowsLen===0) return;

  if(IndexAr[IndexAr.length-1]<RowsLen)
  {
   IndexAr.push(IndexAr[IndexAr.length-1]+1);
   IndexAr.push(RowsLen);

   //document.write("<br/>RowsLen: "+RowsLen);
  }

  var Parent = TblEle.parentNode;

  for(var i=0, j=IndexAr.length; i<j; i++)
  {
   var TempStart=0;
   if(i>0) TempStart=IndexAr[i-1];

   if(RowsLen<IndexAr[i]) break;

   for(var I=TempStart, J=IndexAr[i]; I<J; I++)
   {
//     document.write("<br/>TempStart: "+TempStart);
//     document.write("<br/>IndexAr[i]: "+IndexAr[i]);
//     document.write("<p/>");

    var TempTbl = $("table");
    var TempRowsCount = 0;

    for(var i1=TempStart; i1<IndexAr[i]; i1++)
    {
     TempTbl.insertRow(TblEle.rows[i1]);

     var TempCellsLen = TblEle.rows[i1].cells.length;

     for(var i2=0; i2<TempCellsLen; i2++)
     {
      TempTbl.rows[TempRowsCount].insertCell(TblEle.rows[i1].cells(i2));
      TempTbl.rows[TempRowsCount].cells[i2].innerHTML = TblEle.rows[i1].cells(i2).innerHTML;
     }

     TempRowsCount++;
    }

    Parent.insertBefore(TempTbl, TblEle);
    //TblSet[TblSetCount] = TempTbl;
    TblSetCount++;
   }
  } // end for(var i=0, j=IndexAr.length; i<j; i++)


  TblEle.parentNode.removeChild(TblEle);
} // end function fTableCuter(TblEle, IndexAr)

function fInsertNode(OldNode, NewNode, bBefore)
{// shawl.qiu script
  var ParentNode = OldNode.parentNode;
  if(!ParentNode)return false;
  if(bBefore)
  {
   ParentNode.insertBefore(NewNode,OldNode);
      return false;
  } // end if
  ParentNode.replaceChild(NewNode, OldNode);
  ParentNode.insertBefore(OldNode, NewNode);
} // end function fInsertNode

function $(sTag){return document.createElement(sTag);}

function fSetObject(Obj, sMsg)
{// shawl.qiu code, return Element
  if(!sMsg) sMsg = "无法获得对象!";

  switch(Obj.constructor)
  {
   case String:
    Obj = document.getElementById(Obj);
    break;

   case Array:
    Obj = Obj[0];
    break;
  }

  if(Obj==null) throw new Error(sMsg);

  return Obj;
} // end function fSetObject(OldObj, NewObj, sMsg)

function fOrderArray(Ar, iOrder, bReturn)
{ // shawl.qiu code, return
  if(!iOrder) var iOrder = 1;

  switch(iOrder)
  {
   case 2 : Ar.reverse(); break;
   case 3 : Ar.sort(function(a, b){return a - b;}); break;
   case 4 : Ar.sort(function(a, b){return b - a;}); break;
   default : Ar.sort(); break;
  }
  if(bReturn) return Ar
} // end function fOrderArray(Ar, iOrder)
/*]]*/
</script>
</body>
</html>

3楼的是table内套table,4楼的有道理！

在地址栏查看...
javascript:alert(document.body.innerHTML)有些东西要以再完善一下, 比如定义新的ID序列...

KAO, 有些东西被过滤掉了...
我找个地方放上去...

CSDN 谁弄的垃圾编辑器...
把所有双引号的内容都多了个空格....

<!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>shawl.qiu template</title>
</head>
<body>
<table id= "t1">
<tr>
  <td>
   0
  </td>
</tr>

<tr>
  <td>
   1
  </td>
</tr>

<tr>
  <td>
   2
  </td>
</tr>

<tr>
  <td>
   3
  </td>
</tr>

<tr>
  <td>
   4
  </td>
</tr>

</table>
<script type="text/javascript">
/*<![CDATA[*/

fTableCuter("t1", [1, 2, 3])

function fTableCuter(TblEle, IndexAr)
{
  TblEle = fSetObject(TblEle);
  if(IndexAr.length===0) return;
  fOrderArray(IndexAr, 3);

  var TblSet = [];
  var TblSetCount = 0;

  var RowsLen = TblEle.rows.length;
  if(RowsLen===0) return;

  if(IndexAr[IndexAr.length-1]<RowsLen)
  {
   IndexAr.push(IndexAr[IndexAr.length-1]+1);
   IndexAr.push(RowsLen);

   //document.write("<br/>RowsLen: "+RowsLen);
  }

  var Parent = TblEle.parentNode;

  for(var i=0, j=IndexAr.length; i<j; i++)
  {
   var TempStart=0;
   if(i>0) TempStart=IndexAr[i-1];

   if(RowsLen<IndexAr[i]) break;

   for(var I=TempStart, J=IndexAr[i]; I<J; I++)
   {
//     document.write("<br/>TempStart: "+TempStart);
//     document.write("<br/>IndexAr[i]: "+IndexAr[i]);
//     document.write("<p/>");

    var TempTbl = $("table");
    var TempRowsCount = 0;

    for(var i1=TempStart; i1<IndexAr[i]; i1++)
    {
     TempTbl.insertRow(TblEle.rows[i1]);

     var TempCellsLen = TblEle.rows[i1].cells.length;

     for(var i2=0; i2<TempCellsLen; i2++)
     {
      TempTbl.rows[TempRowsCount].insertCell(TblEle.rows[i1].cells(i2));
      TempTbl.rows[TempRowsCount].cells[i2].innerHTML = TblEle.rows[i1].cells(i2).innerHTML;
     }

     TempRowsCount++;
    }

    Parent.insertBefore(TempTbl, TblEle);
    //TblSet[TblSetCount] = TempTbl;
    TblSetCount++;
   }
  } // end for(var i=0, j=IndexAr.length; i<j; i++)


  TblEle.parentNode.removeChild(TblEle);
} // end function fTableCuter(TblEle, IndexAr)

function fInsertNode(OldNode, NewNode, bBefore)
{// shawl.qiu script
  var ParentNode = OldNode.parentNode;
  if(!ParentNode)return false;
  if(bBefore)
  {
   ParentNode.insertBefore(NewNode,OldNode);
      return false;
  } // end if
  ParentNode.replaceChild(NewNode, OldNode);
  ParentNode.insertBefore(OldNode, NewNode);
} // end function fInsertNode

function $(sTag){return document.createElement(sTag);}

function fSetObject(Obj, sMsg)
{// shawl.qiu code, return Element
  if(!sMsg) sMsg = "无法获得对象!";

  switch(Obj.constructor)
  {
   case String:
    Obj = document.getElementById(Obj);
    break;

   case Array:
    Obj = Obj[0];
    break;
  }

  if(Obj==null) throw new Error(sMsg);

  return Obj;
} // end function fSetObject(OldObj, NewObj, sMsg)

function fOrderArray(Ar, iOrder, bReturn)
{ // shawl.qiu code, return
  if(!iOrder) var iOrder = 1;

  switch(iOrder)
  {
   case 2 : Ar.reverse(); break;
   case 3 : Ar.sort(function(a, b){return a - b;}); break;
   case 4 : Ar.sort(function(a, b){return b - a;}); break;
   default : Ar.sort(); break;
  }
  if(bReturn) return Ar
} // end function fOrderArray(Ar, iOrder)
/*]]*/
</script>
</body>
</html>

昨天,在.net版回过了.http://topic.csdn.net/u/20071109/17/9999ce9b-8db5-487f-8305-f19fa489a62e.html

我也想知道CSDN为什么要自动加那些空格，没必要做这种过滤吧。郁闷。

稍微解释一下
var table1 = document.getElementById("t1");//获取table的实例//cutTable方法参数1:要被切分的table实例参数2:准备在第几行开始切分最小为1 参数3(可选):新table的id
function cutTable(table,srow,newid)
{
//修正切分的起始行使 1<=srow<=table的行数-1
    if(isNaN(srow))return;
    srow = parseInt(srow);
    srow = srow<1?1:srow;
    srow = table.rows.length>srow?srow:(table.rows.length-1);    var newtable = table.cloneNode(false);//复制一个table元素拥有和原table相同的属性但不带子元素
    table.id = newid?newid:(table.id+"_cut");//重置table的id 因为插入的副本在table之前所以修改table的id属性
    table.parentNode.insertBefore(newtable,table);//在table之前插入table的副本
    var tbody = newtable.appendChild(document.createElement("tbody"));//在副本table中插入tbody
    for(var i=0;i<srow;i++)//向table副本中插入table的前指定行
        tbody.appendChild(table.rows[0]);
}
window.onload = function()
{
    cutTable(table1,2);//调用table切分方法切分获取的table 从第二行开始切分
}

调试易

用JS将一个table分解成两个table??

解决方案 »