您好,登錄后才能下訂單哦!
小編給大家分享一下JS怎么實(shí)現(xiàn)動(dòng)態(tài)修改table及合并單元格,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table</title> <script language="javascript" type="text/javascript"> function maketotal(){ var pageCount=4; var currenttype; var indexstr=""; var tabObj = document.getElementById("printtable"); //行數(shù) var rowCount = tabObj.rows.length; //列數(shù) var cellCount = tabObj.rows[0].cells.length; for(var q=1;q<rowCount;q++){ choosetype=tabObj.rows[q].cells[0].innerHTML; if(q==1){ currenttype=choosetype; } if(currenttype!=choosetype){ indexstr=q+","+indexstr; } } alert(indexstr.split(",").length); for(var p=0;p<indexstr.split(",").length;p++){ var temp=indexstr.split(",")[p]; if(temp!=""){ var newRow = tabObj.insertRow(temp); for(var g=0;g<cellCount;g++) { var littleCount=0; for(var h=1;h<rowCount;h++){ if(tabObj.rows[h].cells[g]){ if(g>1){ littleCount=littleCount+parseInt(tabObj.rows[h].cells[g].innerHTML); } } } if(g>1&&g!=6){ newRow.insertCell(g).innerHTML=littleCount; }else if(g==6){ newRow.insertCell(g).innerHTML=""; }else{ newRow.insertCell(g).innerHTML="小計(jì)"; } } } } var newRow = tabObj.insertRow(0); for(var g=0;g<cellCount;g++) { if(g==0){ //newRow.insertCell(g).innerHTML="頭部"; }else{ //newRow.insertCell(g).innerHTML="頭部"; } //alert(tabObj.rows[1].cells[g]); newRow.insertCell(g).innerHTML="頭部"; //tabObj.rows[0].cells[g].colsSpan =2; //tabObj.rows[0].cells[g].rowsSpan =2; tabObj.rows[1].cells[g].style.background="#CCCCCC"; tabObj.rows[0].cells[g].style.background="#CCCCCC"; //tabObj.rows[0].cells[g].rowSpan=2 } tabObj.rows[0].cells[2].colSpan =2; tabObj.rows[0].cells[2].innerHTML="反映形式"; tabObj.rows[0].cells[3].colSpan =2; tabObj.rows[0].cells[3].innerHTML="待處理業(yè)務(wù)數(shù)"; tabObj.rows[0].cells[4].colSpan =1; tabObj.rows[0].cells[4].innerHTML="反映形式"; tabObj.rows[0].cells[5].colSpan=1; tabObj.rows[0].cells[5].innerHTML="反映形式"; tabObj.rows[0].cells[6].colSpan=7; tabObj.rows[0].cells[6].innerHTML=""; tabObj.rows[0].cells[7].style.display = "none"; tabObj.rows[0].cells[8].style.display = "none"; tabObj.rows[0].cells[9].style.display = "none"; tabObj.rows[0].cells[10].style.display = "none"; tabObj.rows[0].cells[11].style.display = "none"; tabObj.rows[0].cells[12].style.display = "none"; tabObj.rows[0].cells[13].style.display = "none"; tabObj.rows[0].cells[14].style.display = "none"; } </script> <script language="javascript" type="text/javascript"> document.onreadystatechange = subSomething; function subSomething() { if(document.readyState == "complete") maketotal(); } </script> </head> <body> <input type="button" onclick="maketotal()" value="遍歷table"/> <DIV class=pageNext> <H1 id=printtitle align=center><FONT >反映來(lái)源統(tǒng)計(jì)</FONT></H1> <TABLE border="1" id="printtable" class=di width="100%"> <TBODY> <TR> <TD>處理分類</TD> <TD>處理內(nèi)容</TD> <TD>來(lái)電數(shù)</TD> <TD>來(lái)訪數(shù)</TD> <TD>接辦數(shù)</TD> <TD>待辦數(shù)</TD> <TD>回復(fù)率</TD> <TD>fffff</TD> <TD>水廠總部</TD> <TD>營(yíng)業(yè)廳</TD> <TD>客戶服務(wù)中心</TD> <TD>管線部</TD> <TD>信息中心</TD> <TD>稽查科</TD> <TD>水質(zhì)檢測(cè)</TD> <TD>安裝公司</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>水務(wù)局</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>投訴</TD> <TD>0</TD> <TD>0</TD> <TD>40</TD> <TD>2</TD> <TD>95.24</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>網(wǎng)格中心</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>居民用戶</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>政府辦</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>測(cè)試分類</TD> <TD>單位用戶</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR> <TR height=30> <TD>合計(jì)</TD> <TD></TD> <TD>0</TD> <TD>0</TD> <TD>40</TD> <TD>2</TD> <TD>95.24</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD> <TD>0</TD></TR></TBODY></TABLE></DIV> </body> </html>
運(yùn)行效果圖如下:
以上是“JS怎么實(shí)現(xiàn)動(dòng)態(tài)修改table及合并單元格”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。