javascript多表计算并鼠标触发合计值，多表调用同一个function方法

来源：互联网发布：淘宝网买东西找人付款编辑：程序博客网时间：2024/05/16 04:59

我的表样是这样子的

表的样子是这样的，这只是其中一个表，还有几个类似于这样的表，我们都需要算合计值，并且鼠标点击就会出现总合计，允许空值，这就需要用到一个总function方法，因为每个表都有不同的行数和列数，所以我们在计算过程中需要从第一行计算到每个表的最后一行，所以在function中设置：tableid(表的id),beginRow(初始行数)，endRow(最后的行数)，ncolumn(列)，

<script>// 城市竞争状况 合计 ;   function tableTotal(thetable,beginRow,endRow,nColumn){      var table = document.getElementById(thetable);    var totalRows = table.rows.length -1;    var firstColumn = 0;    var cc = nColumn-1 ;      for ( var i = beginRow-2; i < endRow-1; ++ i ) {        var trr1 = table.getElementsByTagName("tr")[i+1] ;         var tdd1 = trr1.getElementsByTagName("td")[cc]        var bbb = tdd1.getElementsByTagName("div")[0].id        var value = document.getElementById(bbb).innerHTML;        //文字不予计算        if(!isNaN(value)){            firstColumn += Number(value);            }    }    table.rows[totalRows].cells[cc].innerHTML = firstColumn;  }</script>

我还不会前端，所以就很蒙，这个做了两天，好尴尬
这个表的源码在下面：

 <p><strong>城市竞争状况</strong></p>        <table width="1028" border="0" cellpadding="0"  cellspacing="0" class='table_big'  id="tablelist14">          <tr>            <td width="106" height="28"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">主要竞争品牌</td>            <td width="106"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">2015销售量(KL)</td>            <td width="106"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">市场份额(%)</td>            <td width="200"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">2014到2015的增长率(%)</td>            <td width="191"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">该公司专职销售人员数量</td>            <td width="170"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">经销商专职销售人员数量</td>            <td width="147"  class="datalist_title"  scope="col"          onmouseover="this.style.backgroundColor='#5EA7B9'" onmouseout="this.style.backgroundColor='#E7E7E7'">该城市经销商数量</td>          </tr>          <tr>            <td class="data">美孚</td>            <td class="data"><div id="A3_E51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J51" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">道达尔</td>            <td class="data"><div id="A3_E52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J52" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">BP/嘉实多</td>            <td class="data"><div id="A3_E53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J53" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">长城</td>            <td class="data"><div id="A3_E54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J54" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">昆仑</td>            <td class="data"><div id="A3_E55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J55" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">统一</td>            <td class="data"><div id="A3_E56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J56" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">其他合计</td>            <td class="data"><div id="A3_E57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','2')"></div></td>            <td class="data"><div id="A3_F57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','3')"></div></td>            <td class="data"><div id="A3_G57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','4')"></div></td>            <td class="data"><div id="A3_H57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','5')"></div></td>            <td class="data"><div id="A3_I57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','6')"></div></td>            <td class="data"><div id="A3_J57" class="test_box" contenteditable="true" onblur="tableTotal('tablelist14','2','8','7')"></div></td>            </tr>          <tr>            <td height="21" class="data">总计</td>            <td class="data"><div id="A3_E58" class="test_box" contenteditable="false"></div></td>            <td class="data"><div id="A3_F58" class="test_box" contenteditable="false"></div></td>            <td class="data"><div id="A3_G58" class="test_box" contenteditable="false"></div></td>            <td class="data"><div id="A3_H58" class="test_box" contenteditable="false"></div></td>            <td class="data"><div id="A3_I58" class="test_box" contenteditable="false"></div></td>            <td class="data"><div id="A3_J58" class="test_box" contenteditable="false"></div></td>            </tr>        </table>

那么相应的td中div就加上onblur
这里写图片描述
表的id,由于第一行是表头，所以初始行为2，结束行为8。列数同样第一列为表头，所以从第二列开始。

还有些小细节没有改，比如输入空格或者回车就错误啦~，这个就要再写一些方法去限制我们输入的东西

这样我们有再都的计算列表都可以调用这个方法，

阅读全文

2 0