JS の包括的なアプリケーション例シンプルなテーブル統計

アンケートを行う過程で、js の包括的な知識が必要となるフォームに関する統計的な問題に遭遇したので、記録しました。

基本的な要件は次のとおりです:
JS の包括的なアプリケーション例シンプルなテーブル統計_JavaScript スキル
コア HTML は次のとおりです:

コードをコピーコードは次のとおりです:

（3）2010年市属疾病预防控制中心信息化建设资金来源及分配情况

说明：单位：万元，精确到小数点后1位

;

このような基本的な要件を確認するのは難しくありません。基本的な考え方は、データを更新してフォーカスを失った後に、対応する合計テキストボックスを更新することです。難しいのは、蓄積する必要があるテキストボックスの値を取得することです。
1 合計のテキストボックス ID しかわかっていない場合、累計する必要があるテキストボックスの番号をどのように取得できますか?

まず、行統計を分析します。行統計に必要なテキストボックスと合計テキストボックスが両方とも同じ tr タグ内にあり、両方ともデジタルクラスを持つことがわかります。たとえば、82row1 で計算する必要があるテキストボックス text_4780、text_4782、および text_4783

はすべて同じ tr タグ内にあり、クラスにはデジタルが含まれています (このように、計算する必要のないテキストボックス text_4784カウント対象を除外することも可能です）。

基本的な考え方は、この関係に基づいて統計が必要なテキストボックスを見つけることです。たとえば、82row1 の場合、テキストボックス text_4780、text_4782、text_4783 を見つける必要があります。

テストされた基本的な JS コードは次のとおりです:

コードをコピーしますコードは次のとおりです: function GetOneRowAllChild(totalId)

{

var idList = []; 
var tdList=$("#" totalId).parent('td').parent().children ("td" );//統計テキスト ボックスの親ノード td の親ノード tr を取得し、次に tr の子ノードを取得して同じ行内のすべての td を取得します 
$.each(tdList, function) (i, n){//Loop td 
var inputs=$(n).children("input[type='text']");// td でテキスト ボックスを取得 
if(inputs. length>0) 
{ 
$.each(inputs, function(j, itemInput){ //td でテキスト ボックスをループ
var item=$(itemInput); 
if(item. hasClass("digital"))// 必須のテキスト ボックスであるかどうかを判断し、ソース列のテキスト ボックスを除外します。 
{ 
var id=item.attr("id"); Push(id); 
} 
 }); 
} 
}); ); 
BindBlur(idList,totalId); 
} 
function BindBlur(idList,totalId)//フォーカスを失ったイベント ブラーをバインドします 
{ 
$.each(idList, function( j, item){ 
var id=item ; 
$("#" id).blur( function () { updateSum(idList,totalId) } ) 
}); 🎜>function updateSum(idList,totalId)//統計値の更新 
{ 
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 各行のテキスト ボックスを取得することを考えた後、各列を考慮するという考え方は、各行を取得するという考え方と基本的に同じですが、修正の過程で、まだ多くの違いがあることがわかりました。 

テストされたコードは次のとおりです




コードをコピーします

コードは次のとおりです:

function GetOneColumnAllChild(totalId,index)

{ var idList = []; var trList=$("#" totalId).parent('td').parent('tr') .parent() .children("tr");////統計テキストボックスの親ノード tr の親ノード td の親ノードテーブルを取得し、テーブルの子ノードを取得してすべての 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) // 以降

この方法でデータを取得すると、最初の行にはもう 1 つの td があり、他の行にはエラーが発生します。最初の行より 1 つ少ない 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(",");
}

要約: この種の問題に初めて遭遇したとき、これ以上良いアイデアが思い浮かびません。これは最初は解決されていますが、柔軟性は非常に低く、たとえば、統計を必要とするテキストボックスは各セルに 1 つしか含めることができず、複数ある場合はエラーが発生します。ただし、現在の最も単純なものに従って拡張すると、より複雑な状況に適応できるようになります。

		政府财政	单位自筹	其他资金	合计
直接支出	软件			金额：来源：
	硬件			金额：来源：
	运行维护			金额：来源：
	其他投入			金额：来源：
经费下拨				金额：来源：
				直接支出

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JS の包括的なアプリケーション例シンプルなテーブル統計_JavaScript スキル

（3）2010年市属疾病预防控制中心信息化建设资金来源及分配情况

JS の包括的なアプリケーション例 シンプルなテーブル統計_JavaScript スキル

（3）2010年市属疾病预防控制中心信息化建设资金来源及分配情况

JS の包括的なアプリケーション例シンプルなテーブル統計_JavaScript スキル