js綜合應(yīng)用實(shí)例簡(jiǎn)單的表格統(tǒng)計(jì)
在做調(diào)查問卷的過程中,遇到一個(gè)表格的統(tǒng)計(jì)問題,算是需要些js方面的綜合知識(shí),所以記錄下來。
基本需求如下:
核心的htm如下:
<div class="tablebox">
<h2>
<span>(3)2010年市屬疾病預(yù)防控制中心信息化建設(shè)資金來源及分配情況</span></h2>
<div class="blockB">
<p>
說明:?jiǎn)挝唬喝f(wàn)元,精確到小數(shù)點(diǎn)后1位</p>
</div>
<ul>
<li>
<table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px">
<tr>
<td class="tdright" colspan="2">
</td>
<td class="tdcol">
<!--<td class="tdcol">
項(xiàng)目經(jīng)費(fèi)</td>-->
<td class="tdcol">
單位自籌</td>
<td class="tdcol">
其他資金</td>
<td class="tdcol">
合計(jì)</td>
</tr>
<tr>
<td class="tdright width20" rowspan="4">直接支出</td>
<td class="tdright">
軟件</td>
<td class="tdleft">
<input name="text_4780" type="text" id="text_4780" class="width110 digital" /></td>
<td class="tdleft">
<input name="text_4782" type="text" id="text_4782" class="width110 digital" /></td>
<td class="tdleft">
金額:<input name="text_4783" type="text" id="text_4783" class="width90 digital" />
來源:<input type="text" name="text_4784" id="text_4784" class="width90" /></td>
<td class="tdleft">
<input type="text" class="width110" id='82row1' disabled="disabled" />
</td>
</tr>
<tr>
<td class="tdright">
硬件</td>
<td class="tdleft">
<input name="text_4785" type="text" id="text_4785" class="width110 digital" /></td>
<td class="tdleft">
<input name="text_4787" type="text" id="text_4787" class="width110 digital" /></td>
<td class="tdleft">
金額:<input name="text_4788" type="text" id="text_4788" class="width90 digital" />
來源:<input type="text" name="text_4789" id="text_4789" class="width90" /></td>
<td class="tdleft">
<input type="text" id="82row2" class="width110" disabled="disabled" /></td>
</tr>
<tr>
<td class="tdright">
運(yùn)行維護(hù)</td>
<td class="tdleft">
<input name="text_4790" type="text" id="text_4790" class="width110 digital" /></td>
<td class="tdleft">
<input name="text_4792" type="text" id="text_4792" class="width110 digital" /></td>
<td class="tdleft">
金額:<input name="text_4793" type="text" id="text_4793" class="width90 digital" />
來源:<input type="text" name="text_4794" id="text_4794" class="width90" /></td>
<td class="tdleft">
<input type="text" id="82row3" class="width110" disabled="disabled" /></td>
</tr>
<tr>
<td class="tdright">
其他投入</td>
<td class="tdleft">
<input name="text_4795" type="text" id="text_4795" class="width110 digital" /></td>
<td class="tdleft">
<input name="text_4797" type="text" id="text_4797" class="width110 digital" /></td>
<td class="tdleft">
金額:<input name="text_4798" type="text" id="text_4798" class="width90 digital" />
來源:<input type="text" name="text_4799" id="text_4799" class="width90" /></td>
<td class="tdleft">
<input type="text" id="82row4" class="width110" disabled="disabled" /></td>
</tr>
<tr>
<td class="tdright" colspan="2">
經(jīng)費(fèi)下?lián)?lt;/td>
<td class="tdleft">
<input name="text_6362" type="text" id="text_6362" class="digital width110" /></td>
<td class="tdleft">
<input name="text_6363" type="text" id="text_6363" class="digital width110" /></td>
<td class="tdleft">
金額:<input name="text_6364" type="text" id="text_6364" class="digital width90" />
來源:<input name="text_6365" type="text" id="text_6365" class="width90" /></td>
<td class="tdleft">
<input type="text" id="82row5" class="width110" disabled="disabled" /></td>
</tr>
<tr>
<td class="tdright" colspan="2">
合計(jì)</td>
<td class="tdleft">
<input type="text" id="82col1" title1="surveyTable" disabled="disabled" /></td>
<td class="tdleft">
<input type="text" id="82col3" title1="surveyTable" disabled="disabled" /></td>
<td class="tdleft">
<input type="text" id="82col4" title1="surveyTable" disabled="disabled" /></td>
<td class="tdleft">
<input type="text" id="82sum" title1="surveyTable" disabled="disabled" /></td>
</tr>
</table>
</li>
</ul>
</div>
看到這樣的基本需求,本身并不難,基本思路就是在更新數(shù)據(jù)后,失去了焦點(diǎn)的同時(shí),更新對(duì)應(yīng)的合計(jì)文本框。難點(diǎn)在于獲取需要累加那些文本框的值。
1如果只知道合計(jì)的文本框ID如何得到需要累加的文本框編號(hào)呢?
先分析行統(tǒng)計(jì),可以發(fā)現(xiàn),行統(tǒng)計(jì)需要的文本框和合計(jì)的文本框都在同一個(gè)tr標(biāo)簽中,而且都有類digital。例如82row1需要計(jì)算的文本框text_4780,text_4782,text_4783
都在同一個(gè)tr標(biāo)簽中,而且類都有digital(這樣就可以排除不需要統(tǒng)計(jì)的文本框text_4784)。
所以基本的思路就是根據(jù)這個(gè)關(guān)系去尋找需要統(tǒng)計(jì)的文本框,例如對(duì)于82row1就需要找到文本框text_4780,text_4782,text_4783。
經(jīng)過測(cè)試的基本js代碼如下:
function GetOneRowAllChild(totalId)
{
var idList = [];
var tdList=$("#"+totalId).parent('td').parent().children("td");//取統(tǒng)計(jì)文本框的父節(jié)點(diǎn)td的父節(jié)點(diǎn)tr,然后再取tr的子節(jié)點(diǎn),得到同一行的所有td
$.each(tdList, function(i, n){//循環(huán)td
var inputs=$(n).children("input[type='text']");//得到td中的文本框
if(inputs.length>0)
{
$.each(inputs, function(j, itemInput){ //循環(huán)td中的文本框
var item=$(itemInput);
if(item.hasClass("digital"))//判斷是不是需要的文本框,排除來源列的文本款
{
var id=item.attr("id");
idList.push(id);
}
});
}
});
//var NameList = idList.join(",");
//alert(NameList);
BindBlur(idList,totalId);
}
function BindBlur(idList,totalId)//綁定失去焦點(diǎn)的事件blur
{
$.each(idList, function(j, item){
var id=item;
$("#"+id).blur( function () { updateSum(idList,totalId) } );
});
}
function updateSum(idList,totalId)//更新統(tǒng)計(jì)值
{
var sum=0.0;
$.each(idList, function(j, item){
var id=item;
var value=$("#"+id).val();
if($.isNumeric(value))
{
sum+=parseFloat(value);
}
});
$("#"+totalId).val(sum);
}
2有了獲取每一行的的文本框的思路后,在考慮每一列的思路,和獲取每一行的思路基本相同,但在修改的過程中,發(fā)現(xiàn)還是有很多不同。
經(jīng)過測(cè)試的代碼如下
function GetOneColumnAllChild(totalId,index)
{
var idList = [];
var trList=$("#"+totalId).parent('td').parent('tr').parent().children("tr");////取統(tǒng)計(jì)文本框的父節(jié)點(diǎn)td的父節(jié)點(diǎn)tr的父節(jié)點(diǎn)table,然后再取table的子節(jié)點(diǎn),得到所有tr
$.each(trList, function(i, n){ //遍歷所有的tr
var tdList=$(n).children("td") //
if(tdList.length>0)
{
var inputindex=0;
$.each(tdList, function(j, item){ //遍歷所有的td
// if(j==index)// 由于<td class="tdright width20" rowspan="4">直接支出</td>,導(dǎo)致如果這樣取數(shù)據(jù)會(huì)出錯(cuò),因?yàn)榈谝恍卸嗔艘粋€(gè)td,其他含都比第一行少了一個(gè)td
// {
var inputList=$(item).children("input[type='text']");
if(inputList.length>0) {
$.each(inputList, function(k, iteminput){ //遍歷所有的文本框
var item=$(iteminput);
if(item.hasClass("digital")){
inputindex++;
if(inputindex==index){ //支取指定列的文本框
idList.push(item.attr("id"));
}
}
});//end inputList
}// end if(inputList.length>0)
});// end tdList
} // if(tdList.length>0)
});//end trList
BindBlur(idList,totalId);
//var NameList = idList.join(",");
//alert(NameList);
}
總結(jié):初次遇見此類問題,真的沒有什么比較好的思路。這樣雖然初步算是解決了,但靈活性很小,例如每一個(gè)單元格只能有一個(gè)需要統(tǒng)計(jì)的文本框,多個(gè)就會(huì)出錯(cuò)。不過根據(jù)現(xiàn)在最簡(jiǎn)單如果進(jìn)行擴(kuò)展,就會(huì)適應(yīng)更復(fù)雜的情況。
相關(guān)文章
微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法淺析
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法,我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱,這種功能怎么實(shí)現(xiàn)呢?本篇文章帶你探索2023-02-02javascript 函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別介紹
javascript中的函數(shù)聲明與函數(shù)表達(dá)式使用比較頻繁,可能很多的朋友都不知道他們之間的區(qū)別,在此為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-10-10javascript對(duì)select標(biāo)簽的控制(option選項(xiàng)/select)
html中的select標(biāo)簽,也是asp.net中的asp:DropDownList控件,接下來介紹javascript對(duì)select標(biāo)簽的控制,感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-01-01JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08JavaScript中String對(duì)象的使用方法以及實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript中String對(duì)象的使用方法以及實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),方便開發(fā)者在JavaScript開發(fā)中更好地處理字符串,需要的朋友可以參考下2022-04-04js 實(shí)現(xiàn)菜單左右滾動(dòng)顯示示例介紹
菜單左右滾動(dòng)顯示的實(shí)現(xiàn)方法有很多,在本文將為大家介紹下如何使用js實(shí)現(xiàn),需要的朋友可以參考下,希望對(duì)大家有所幫助2013-11-11javaScript實(shí)現(xiàn)浮點(diǎn)數(shù)轉(zhuǎn)十六進(jìn)制字符
浮點(diǎn)數(shù)轉(zhuǎn)十六進(jìn)制的方法有很多,在本文將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-10-10javascript實(shí)現(xiàn)簡(jiǎn)單的ajax封裝示例
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的ajax封裝功能,結(jié)合實(shí)例形式分析了ajax基本功能與操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12