利用jquery复制表格
利用jquery进行复制表格
代码如下：
思路很简单：
View Code
<!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>
<script type="text/javascript" src="../jquery/Script/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function(){
alert($("tr:eq(5)").children().eq(0).attr("colspan"))
/* alert($("tr:eq(4)").children(1).text())
alert($("#rowspan2").index())
alert($("#rowspan2next").index())
alert($("#rowspan2next").children().eq(0).text())
alert($("#rowspan2nextnextnext").index())*/
/*alert( $("#testTr :nth-child(5)").text());
alert($("tr").length)
alert($("#testTr").index())*/
$("#copy").click(function(){
var rowLength = $("tr").length;
var index = 0;
var $table=$("<table></table>")
for(;index<=rowLength;index++)
{
var tdindex=0;
var $tr = $("<tr></tr>")
for(;tdindex<$("tr").eq(index).children().length;tdindex++)
{
var $td= $("<td></td>")
var $reallytd = $("tr").eq(index).children().eq(tdindex);
$td.attr("colspan",$reallytd.attr("colspan"));
$td.attr("rowspan",$reallytd.attr("rowspan"));
$td.text($reallytd.text());
$tr.append($td);
}
$table.append($tr);
}
$("div").append($table);
})
})
</script>
<style>
table{border:1px solid #0F0; -moz-user-select: none; }
td,th{border:1px solid #0F0;}
</style>
</head>
<body onselectstart= "return false ">
<table id='testTable' >
<tr> <td>fdfdfr1</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr> <td>fdfdfr2</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="testTr"> <td colspan="3">fdfdfr3</td> <td>fdfdfd</td><td>dffd</td></tr>
<tr> <td colspan="3">fdfdfr4</td> <td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2"> <td rowspan="2">fdfdf1212</td> <td>fdfdfd3434r5</td><td>dffd5</td><td>fdfdfd6</td><td>dffd7</td></tr>
<tr id="rowspan2next"> <td>fdfdfd4444r6</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2nextnext"> <td>fdfdf5r7</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2nextnextnext"> <td>fdfdfr8</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
</table>
<div></div>
<button id="copy">fdfdfd</button>
</body>
</
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery/Script/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function(){
alert($("tr:eq(5)").children().eq(0).attr("colspan"))
/* alert($("tr:eq(4)").children(1).text())
alert($("#rowspan2").index())
alert($("#rowspan2next").index())
alert($("#rowspan2next").children().eq(0).text())
alert($("#rowspan2nextnextnext").index())*/
/*alert( $("#testTr :nth-child(5)").text());
alert($("tr").length)
alert($("#testTr").index())*/
$("#copy").click(function(){
var rowLength = $("tr").length;
var index = 0;
var $table=$("<table></table>")
for(;index<=rowLength;index++)
{
var tdindex=0;
var $tr = $("<tr></tr>")
for(;tdindex<$("tr").eq(index).children().length;tdindex++)
{
var $td= $("<td></td>")
var $reallytd = $("tr").eq(index).children().eq(tdindex);
$td.attr("colspan",$reallytd.attr("colspan"));
$td.attr("rowspan",$reallytd.attr("rowspan"));
$td.text($reallytd.text());
$tr.append($td);
}
$table.append($tr);
}
$("div").append($table);
})
})
</script>
<style>
table{border:1px solid #0F0; -moz-user-select: none; }
td,th{border:1px solid #0F0;}
</style>
</head>
<body onselectstart= "return false ">
<table id='testTable' >
<tr> <td>fdfdfr1</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr> <td>fdfdfr2</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="testTr"> <td colspan="3">fdfdfr3</td> <td>fdfdfd</td><td>dffd</td></tr>
<tr> <td colspan="3">fdfdfr4</td> <td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2"> <td rowspan="2">fdfdf1212</td> <td>fdfdfd3434r5</td><td>dffd5</td><td>fdfdfd6</td><td>dffd7</td></tr>
<tr id="rowspan2next"> <td>fdfdfd4444r6</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2nextnext"> <td>fdfdf5r7</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
<tr id="rowspan2nextnextnext"> <td>fdfdfr8</td> <td>fdfdfd</td><td>dffd</td><td>fdfdfd</td><td>dffd</td></tr>
</table>
<div></div>
<button id="copy">fdfdfd</button>
</body>
</
