使用JavaScript合並單元格


今天在寫代碼的時候要求對表格進行合並和統計,但是在合並的過程中出現了好多問題,不過最終還是解決啦,O(∩_∩)O~~,下面把寫好的代碼展示出來

 <table border="2px " align="center" id="GoodsTable">
<thead>
<tr>
<th>商品コド</th>
<th>商品名</th>
<th>受注コド</th>
<th>出庫數</th>
<th>合計出庫數</th>
</tr>
</thead>
<tbody id="GoodsTbody">


<tr>
<td>1002</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>

</tr>
<tr>
<td>1002</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1002</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1001</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1001</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1001</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1003</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1003</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1003</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1004</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1004</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1004</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td>1004</td>
<td>ball</td>
<td>10001</td>
<td>100</td>
<td>300</td>
</tr>


</tbody>

</table>

  合並單元格之前的效果

 

 加入下邊的JavaScript腳本代碼

<script type="text/javascript">


function merge1() {
// 獲取當前的表
var tb = document.getElementById("GoodsTbody");
// 獲取行數

// 設置跨行動態變量
var rowsnum = tb.rows.length;
//第一次遍歷,該遍歷主要是為了把一個表看成了兩個表,然后兩個表兩相對應
for (var i = 0; i < rowsnum; i++) {
// 獲取第一列里邊的值
var TempStr = tb.rows[i].cells[0].innerHTML;
// 在求總和時賦予初始值
var total = parseInt(tb.rows[i].cells[3].innerHTML);
// 跨行為0
rowspan = 0;
// 第二次遍歷,不要讓自己與自己比較
for (var j = i + 1; j < rowsnum; j++) {

if (TempStr == tb.rows[j].cells[0].innerHTML) {
rowspan++;
// 求和計算
total += parseInt(tb.rows[j].cells[3].innerHTML);
// alert("rownums is " + rowspan + "and I is " + i + "and j is" + j + "and total is" + total);
// 設置跨行
tb.rows[i].cells[0].rowSpan = rowspan + 1;
tb.rows[i].cells[1].rowSpan = rowspan + 1;
tb.rows[i].cells[4].rowSpan = rowspan + 1;
// 求和操作
tb.rows[i].cells[4].innerHTML = total;
// 不顯示以下列
tb.rows[j].cells[0].style.display = "none";
tb.rows[j].cells[1].style.display = "none";
tb.rows[j].cells[4].style.display = "none";

}
}
}

}
merge1();

</script>

  

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com