拆分单元格_层和布局特效

模板酷站
  •       3/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      拆分单元格,您可以先修改部分代码再运行.

      <html> <head> <meta http-equiv = "Content-Type" mrc = "text/html; charset=gb2312"> <title>拆分单元格-模板无忧www.mb5u.com</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>