js 종합 응용 예제 간단한 테이블 통계_javascript 기술-JS 튜토리얼-php.cn

설문지를 작성하는 과정에서, js에 대한 포괄적인 지식이 필요한 양식에 통계적인 문제가 있어서 기록하게 되었습니다.

기본 요구사항은 다음과 같습니다.
js 종합 응용 예제 간단한 테이블 통계_javascript 기술
핵심 htm은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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

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

;

이러한 기본 요구 사항을 보는 것은 어렵지 않습니다. 기본 아이디어는 데이터를 업데이트하고 포커스를 잃은 후 해당 전체 텍스트 상자를 업데이트하는 것입니다. 어려운 점은 누적되어야 하는 텍스트 상자의 값을 가져오는 것입니다.
1 전체 텍스트박스 ID만 알면, 누적해야 할 텍스트박스 번호는 어떻게 알 수 있나요?

먼저 행 통계를 분석해 보면 행 통계에 필요한 텍스트 상자와 전체 텍스트 상자가 모두 동일한 tr 태그에 있고 둘 다 digital 클래스를 갖고 있음을 알 수 있습니다. 예를 들어 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){//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") 
idList. push(id); 
 }); 
} 
}) 
//var NameList = idList.join(",")//alert(NameList) ); 
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");////통계 텍스트 상자의 상위 노드 td의 상위 노드 tr의 상위 노드 테이블을 가져온 다음 테이블의 하위 노드를 가져와 모든 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가 하나 더 있고 나머지 행에는 오류가 발생합니다. 첫 번째 행보다 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);

요약: 이런 문제를 처음 접했을 때 정말 더 좋은 아이디어가 떠오르지 않았습니다. 이 문제는 처음에는 해결되었지만 유연성이 매우 낮습니다. 예를 들어 각 셀에는 통계가 필요한 텍스트 상자가 하나만 있을 수 있으며, 두 개 이상 있으면 오류가 발생합니다. 그러나 현재의 가장 간단한 방법에 따라 확장하면 더 복잡한 상황에 적응할 것입니다.

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

js 종합 응용 예제 간단한 테이블 통계_javascript 기술

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