JS Comprehensive application example simple table statistics _javascript skill

In the process of doing a questionnaire, encountered a table of statistical problems, is a need for some of the comprehensive knowledge of JS, so record down.

The basic requirements are as follows:

The core HTM is as follows:

Copy Code code as follows:

<div class= "Tablebox" >
<span> (3) The source and distribution of information construction of the municipal disease Prevention and Control center in 2010 </span><div class= "BLOCKB" >
<p>
Description: Unit: million, accurate to 1 digits after the decimal point </p>
</div>
<ul>
<li>
<table border= "0" cellspacing= "0" cellpadding= "0" class= "templatetable" width= "750px" >
<tr>
&LT;TD class= "Tdright" colspan= "2" >
</td>
&LT;TD class= "Tdcol" >
Government Finance </td>
<!--<td class= "Tdcol" >
Project Funds </td>-->
&LT;TD class= "Tdcol" >
Unit self-financing </td>
&LT;TD class= "Tdcol" >
Other funds </td>
&LT;TD class= "Tdcol" >
Total </td>
</tr>
<tr>
&LT;TD class= "Tdright width20" rowspan= "4" > Direct expenditure </td>
&LT;TD class= "Tdright" >
Software </td>
&LT;TD class= "Tdleft" >
<input name= "text_4780" type= "text" id= "text_4780" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
<input name= "text_4782" type= "text" id= "text_4782" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
Amount: <input name= "text_4783" type= "text" id= "text_4783" class= "WIDTH90 digital"/>
Source: <input type= "text" name= "text_4784" id= "text_4784" class= "WIDTH90"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" class= "width110" id= "82row1" disabled= "disabled"/>
</td>
</tr>
<tr>
&LT;TD class= "Tdright" >
Hardware </td>
&LT;TD class= "Tdleft" >
<input name= "text_4785" type= "text" id= "text_4785" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
<input name= "text_4787" type= "text" id= "text_4787" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
Amount: <input name= "text_4788" type= "text" id= "text_4788" class= "WIDTH90 digital"/>
Source: <input type= "text" name= "text_4789" id= "text_4789" class= "WIDTH90"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82row2" class= "width110" disabled= "disabled"/></td>
</tr>
<tr>
&LT;TD class= "Tdright" >
Operation Maintenance </td>
&LT;TD class= "Tdleft" >
<input name= "text_4790" type= "text" id= "text_4790" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
<input name= "text_4792" type= "text" id= "text_4792" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
Amount: <input name= "text_4793" type= "text" id= "text_4793" class= "WIDTH90 digital"/>
Source: <input type= "text" name= "text_4794" id= "text_4794" class= "WIDTH90"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82row3" class= "width110" disabled= "disabled"/></td>
</tr>
<tr>
&LT;TD class= "Tdright" >
Other inputs </td>
&LT;TD class= "Tdleft" >
<input name= "text_4795" type= "text" id= "text_4795" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
<input name= "text_4797" type= "text" id= "text_4797" class= "width110 digital"/></td>
&LT;TD class= "Tdleft" >
Amount: <input name= "text_4798" type= "text" id= "text_4798" class= "WIDTH90 digital"/>
Source: <input type= "text" name= "text_4799" id= "text_4799" class= "WIDTH90"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82row4" class= "width110" disabled= "disabled"/></td>
</tr>
<tr>
&LT;TD class= "Tdright" colspan= "2" >
Funds allocated </td>
&LT;TD class= "Tdleft" >
<input name= "text_6362" type= "text" id= "text_6362" class= "Digital width110"/></td>
&LT;TD class= "Tdleft" >
<input name= "text_6363" type= "text" id= "text_6363" class= "Digital width110"/></td>
&LT;TD class= "Tdleft" >
Amount: <input name= "text_6364" type= "text" id= "text_6364" class= "Digital width90"/>
Source: <input name= "text_6365" type= "text" id= "text_6365" class= "WIDTH90"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82row5" class= "width110" disabled= "disabled"/></td>
</tr>
<tr>
&LT;TD class= "Tdright" colspan= "2" >
Total </td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82col1" title1= "surveytable" disabled= "disabled"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82col3" title1= "surveytable" disabled= "disabled"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82col4" title1= "surveytable" disabled= "disabled"/></td>
&LT;TD class= "Tdleft" >
<input type= "text" id= "82sum" title1= "surveytable" disabled= "disabled"/></td>
</tr>
</table>
</li>
</ul>
</div>

To see such basic needs, itself is not difficult, the basic idea is to update the data, lost focus while updating the corresponding aggregate text box. The difficulty is getting the values that need to accumulate those text boxes.

1 What if you only know how the total text box ID gets the text box number that you want to add?

By analyzing the row statistics, you can see that the text boxes and total text boxes needed for row statistics are all in the same TR tag, and all have class digital. For example 82row1 text boxes that need to be computed text_4780,text_4782,text_4783

Are all in the same TR tag, and the classes have digital (this allows you to exclude text boxes text_4784 that don't require statistics).

So the basic idea is based on this relationship to find the need for statistical text boxes, such as for 82row1 need to find text box text_4780,text_4782,text_4783.

The basic JS code has been tested as follows:

Copy Code code as follows:

function Getonerowallchild (totalid)
{
var idlist = [];
var tdlist=$ ("#" +totalid). Parent (' TD '). Parent (). Children ("TD");//The parent of TD, the parent node of the statistic text box, and then take the child node of TR to get all TD in the same line.
$.each (tdlist, function (i, n) {//cyclic TD
var inputs=$ (n). Children ("input[type= ' text ')")//Get a text box in TD
if (inputs.length>0)
{
$.each (Inputs, function (j, iteminput) {//circular TD text Box
var item=$ (iteminput);
if (Item.hasclass ("digital"))//Judge is not required text box, exclude source column of text section
{
var id=item.attr ("id");
Idlist.push (ID);
}
});
}
});
var namelist = Idlist.join (",");
alert (namelist);
Bindblur (Idlist,totalid);
}
function Bindblur (idlist,totalid)/bind event that loses focus Blur
{
$.each (Idlist, function (j, item) {
var Id=item;
$ ("#" +id). blur (function () {updatesum (Idlist,totalid)});
});
}
function Updatesum (idlist,totalid)//UPDATE STATISTICS
{
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 with the idea of getting each line of text boxes, thinking about each column, and getting each line of thought basically the same, but in the process of modification, found that there are many differences.

The tested code is as follows

Copy Code code as follows:

function Getonecolumnallchild (totalid,index)
{
var idlist = [];
var trlist=$ ("#" +totalid). Parent (' TD '). Parent (' TR '). Parent (). Children ("tr");////the parent node of TD, the parent node of the statistics text box. Then take the child node of the table and get all the TR
$.each (trlist, function (i, n) {//Traverse all TR
var tdlist=$ (n). Children ("TD")//
if (tdlist.length>0)
{
var inputindex=0;
$.each (Tdlist, function (j, item) {//Traverse all TD
if (J==index)//due to &LT;TD class= "Tdright width20" rowspan= "4" > Direct expenditure </td&gt, which causes errors if this data is taken, because the first line is more than one TD, Others are less than the first line of a TD
// {
var inputlist=$ (item). Children ("input[type= ' text ')");
if (inputlist.length>0) {
$.each (Inputlist, function (k, iteminput) {//Traverse all text boxes
var item=$ (iteminput);
if (Item.hasclass ("digital")) {
inputindex++;
if (Inputindex==index) {//Draw the text box for the specified column
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);
}

Summary: The first encounter such a problem, there is really nothing better than the idea. This is the initial solution, but the flexibility is very small, for example, each cell can only have one need to count the text box, multiple will be wrong. However, the easiest thing to do now is to adapt to more complex situations if you extend it.