JS는 텍스트 상자 그룹을 추가 및 삭제하고 입력 정보를 확인하여 정확성_javascript 기술을 결정합니다.

프로젝트 중에 이러한 문제가 발생했습니다. 즉, 데이터베이스에 여러 데이터 세트를 추가해야 하지만 특정 데이터 세트가 확실하지 않아 고객이 입력해야 하는 경우입니다. 100개 이상 구매 시 50% 할인, 200개 이상 구매 시 40% 할인, 500개 이상 구매 시 30% 할인 등 각 전략에 대해 다양한 세트의 계획이 있을 수 있습니다. 이는 일련의 세트로 구현됩니다. 하지만 계획 세트에 하위 계획이 몇 개 있는지 확실하지 않으므로 여기서는 JS를 사용합니다. 하위 계획을 추가 및 삭제하고, 계획 입력의 정확성을 판단하고 json 전송을 통해 데이터베이스에 씁니다. 여기서는 하위 프로젝트 그룹을 추가하고 삭제하는 방법과 각 텍스트 상자에 확인을 추가하는 방법을 주로 작성합니다.

동적으로 텍스트 상자 그룹 추가:

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

var countTable = 0;
//테이블 행 추가
addTable = function () {
//테이블 가져오기
var tab1 = document.getElementById("discountTable") ;
// 테이블의 모든 셀 수
// cell = tab1.cells.length
//테이블의 행 수
n = tab1.rows.length;
//테이블의 열 수
//cell = cell / n
//테이블에 행 추가
r = tab1.insertRow(n); /현재 행의 각 셀 추가
r.insertCell(0).innerHTML = 'X원 지출: *' ;
r.insertCell(1).innerHTML = '할인율: ;label class="veritifyMessage" style="display: none;font-size:16px ;color: #F00; width:10px;float:right">*'
r.insertCell( 2).innerHTML = '' ;
countTable = countTable 1;
}

참고:
1. 여기서 countTable은 각 행을 식별하는 데 사용되는 모든 변수여야 합니다. 조건이 다르며 행 삭제 후 ID가 중복되는 것을 방지합니다.
2. 여기에 각 텍스트에 대해 포커스 이탈 이벤트가 추가됩니다. 즉, 포커스가 현재 텍스트 상자를 떠날 때 입력과 일치하는지 확인해야 합니다.
3. 입력한 텍스트가 요구 사항을 충족하지 않으면 레이블이 텍스트 상자 뒤에 추가됩니다.
줄 삭제:

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

// 현재 줄 삭제
deleteTable = function (el) {
// Alert( el.id)
//테이블 가져오기
var tab1 = document.getElementById("discountTable"); >//Loop 삭제해야 할 행을 결정
for (i = 0; i < tab1.rows.length; i ) {
//행 ID 가져오기
var deleteValue = tab1.rows[i].cells[ 2].childNodes[0].id;
//각 행의 ID를 가져와서 현재 클릭한 ID와 비교하는 루프입니다.
if (el.id == deleteValue) {
tab1.deleteRow (i);
break; 한 줄은 현재 지점의 줄이고 삭제됩니다.
유효성 검사 컨트롤 표시 및 숨기기 방법(포커스가 텍스트를 벗어날 때 텍스트 판단):




코드 복사

코드는 다음과 같습니다.

//첫 번째 정보 입력이 올바른지 확인 terifyNumFirst = function (objText) { var terifyText = objText.value //정보를 입력할 수 없습니다. 비어 있음 if (terifyText== "") {

objText.parentNode.children[1].style.display="block"

return
}
// 정보는 숫자여야 합니다
if (isNaN(terifyText))
{
objText.parentNode.children[1].style.display = "block"
return; >objText .parentNode.children[1].style.display = "none";
}


모든 정보를 작성해야 할 경우에도 판단을 내려야 합니다. 그렇지 않으면 데이터 테이블이 생성되어 반환됩니다. 이를 백그라운드로 전송하는 구체적인 방법은 다음 블로그에서 작성하겠습니다.




코드 복사


코드는 다음과 같습니다.

//DataTable 객체 생성
function generateDtb() {
//플래그에 데이터를 쓸 수 있는지 확인, false는 쓸 수 있음을, true는 쓸 수 없음을 의미합니다
var flag = false;//테이블 가져오기
var tab1 = document.getElementById("discountTable");
//첫 번째 열 데이터
var firstGroup = document.getElementsByClassName("groupFirst") ;
//두 번째 열 데이터
var secondGroup = document.getElementsByClassName("groupSecond");
//확인 정보가 유효한지 확인
var veritify = document.getElementsByClassName("veritifyMessage") ;
// 경고(secondGroup.item(0).value);
//비어 있는지 확인
for (var i = 0; i < firstGroup.length; i )
{
/ /데이터의 첫 번째 열이 비어 있는지 확인합니다. 비어 있으면
if (firstGroup[i].value == "")
{
veritify[( i * 2)].style.display = "block";
flag = true;
}
//데이터의 두 번째 열이 비어 있는지 확인합니다.
if (secondGroup[i].value == "" )
{
veritify[(i * 2 1)].style.display = "block"
flag = true; >}
}
for (var i = 0 ; i < veritify.length; i )
{
if (veritify[i].style.display == "block")
{
flag = true;
}
}
//alert(veritify.length)
//입력된 모든 정보가 유효하면 현재 정보가 배열로 구성되고 처리를 위해 정보가 반환됩니다.
if (flag == false) {
//쓰기
var txtName = document.getElementById("txtName").value;
//배열 생성
var dtb = new Array( );//루프를 통해 배열에 데이터를 쓰고
을 반환합니다. for (var i = 0; i < firstGroup.length; i ) {
var row = new Object(); row.Name = txtName;
row.fullMoney = firstGroup[i].value;
row.discount = secondGroup[i].value;
dtb.push(row); >return dtb
}


여기서도 확인은 비교적 간단합니다. 텍스트 상자 입력이 비어 있는지, 숫자인지 확인하고, 입력에 따라 배열을 백그라운드로 전달하고 데이터베이스에 쓰는 방법을 다음 기사에서 작성하겠습니다.