[查看演示] 源码如下
----------------------------------------------------------
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=gb2312">
<title>拆分单元格－www.51windows.Net－www.51windows.Net</title>
<style>
* {font:menu}
td
{
background: #f2f3f7;
/*width: 30;*/
height: 20;
text-align: center;
}
table
{
width: 200;
}
</style>
<body>
<table cellspacing = 1 bgcolor = #cccccc id = phx align=left>
<tr>
<td>1</td>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
</tr>
<tr>
<td>2</td>
<td colspan="2" rowspan="3">*</td>
<td>32</td>
<td>42</td>
<td>52</td>
</tr>
<tr>
<td>3</td>
<td>33</td>
<td>43</td>
<td>53</td>
</tr>
<tr>
<td>4</td>
<td>34</td>
<td colspan="2" rowspan="2">**</td>
</tr>
<tr>
<td>5</td>
<td>15</td>
<td>25</td>
<td>35</td>
</tr>
<tr>
<td>6</td>
<td colspan="2" rowspan="2">***</td>
<td>36</td>
<td>46</td>
<td>56</td>
</tr>
<tr>
<td>7</td>
<td>37</td>
<td>47</td>
<td>57</td>
</tr>
<tr>
<td>8</td>
<td>18</td>
<td>28</td>
<td>38</td>
<td>48</td>
<td>58</td>
</tr>
</table>
<table cellspacing = 1 bgcolor = #cccccc id = phx2>
<tr>
<td>1</td>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
</tr>
<tr>
<td>2</td>
<td colspan="5" rowspan="6">**</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>18</td>
<td>28</td>
<td>38</td>
<td>48</td>
<td>58</td>
</tr>
</table>
<br/> <button onclick='split_table(phx);'>拆分表格一</button> <button onclick='split_table(phx2);'>拆分表格二</button> <br/><br/>
<div id="newtable"></div>
<script>
window.onerror = function(err, url, line)
{
alert('在代码 ' + line + ' 行发生错误: ' + err + '\r\r错误原因: 表格中行 ' + (r + 1) + ' 列 ' + (phxcols + 1)
+ ' 单元格空缺');
return true;
}
function split_table(phx)
{
//作者：panliu888
//修改：海娃
//2004-3-8
var c = 0
for (var i = 0; i < phx.rows[0].cells.length; i++)
{
c += phx.rows[0].cells[i].getAttribute("colspan");
}
var data = new Array(phx.rows.length)
for (var r = 0; r < phx.rows.length; r++)
{
data[r] = new Array(c);
}
for (var r = 0; r < phx.rows.length; r++)
{
phxcols = 0;
for (var i = 0; i < c; i++)
{
if (typeof(data[r][i])== "undefined")
{
for (var row = 0; row < phx.rows[r].cells[phxcols].getAttribute("rowspan"); row++)
{
for (var cols = 0; cols < phx.rows[r].cells[phxcols].getAttribute("colspan"); cols++)
{
data[r + row][i + cols] = phx.rows[r].cells[phxcols].innerText;
}
}
phxcols++;
}
}
}
demo = "";
tablehtml = "";
for (var c = 0; c< data.length; c++)
{
tablehtml += "<tr>"
for (var r = 0; r < data.length; r++)
{
if (typeof(data[c][r])!="undefined")
{
tablehtml += "<td>" + data[c][r] + "</td>"
demo += "data[" + c + "][" + r + "]: =\"" + data[c][r] + "\";\t"
}
}
tablehtml += "</tr>"
demo += "\r"
}
//alert(data)
//alert(demo)
newtable.innerHTML = "<table cellspacing = 1 bgcolor = #cccccc>"+tablehtml+"</table>"
}
</script>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
