JavaScript를 사용하여 ListBox 기능과 유사한 샘플 코드 구현_javascript 기술

JavaScript가 여러 데이터를 요청하고 처리할 때 이를 구현하는 방법에 대해 종종 고민합니다. 다른 데이터 항목에 영향을 주지 않고 동적으로 편집하고 삭제하는 방법을 소개합니다. 예를 들어 Data를 통해 다음을 요청합니다. 🎜>

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

{ "Table":
[
{ "Id": 3, "Type": "X",
"Content": "공산당 제18차 전국대표대회 보고서 우리 나라 당은 우리 국민이 민주주의의 중요한 형태는 무엇이라고 지적했나요? ",
"Akey": "풀뿌리 민주주의 정치 체제", "Bkey": "인민 의회 체제",
"Ckey": "다자간 협력 시스템", "Dkey" ": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "티베트 영양은 국산입니다 1급 보호동물이며 ()의 독특한 동물이다.",
"Akey": "칭하이-티베트 고원", "Bkey": "Xinjiang",
"Ckey": "칭하이", "Dkey" ": null, "NUM": 2 },
{ "Id" : 1, "Type": "X", "Content": "야생동물을 보호한다는 것은 많은 의미를 갖고 있는데, 이에 포함되지 않는 것은" ,
"Akey": "환경적 영향", "Bkey": "문화적 가치",
"Ckey": "보기 가치", "Dkey": null, "NUM": 1 }
]
}

HTML로 표시를 수정하고 json 구문 분석 및 데이터의 계층적 표시를 포함하는 편집 및 삭제 작업을 구현하는 방법:

HTML 표시 태그:

JavaScript는 데이터를 구문 분석하여 다음을 표시합니다.

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

xmlHttp.responseText;
eval("var result =" response);
var len = result.Table.length;
if (len > 0) {
var msg = ""; 🎜>for (var i = 0; i msg = "

" result.Table[i].Content ""; >msg = "" 결과.Table[i].Akey "< /span>"
msg = "" 결과.Table[i].Bkey " ";
msg = "" result.Table[i].Ckey "";
msg = "" result.Table[i].Dkey "< ;/span>";
msg = "편집";
msg = " 삭제"
msg = "< /li>";
}
document.getElementById("msg ").innerHTML = msg;
}


각 데이터 조각을 처리할 수 있습니다. editSub(id) 및 Delete(id) 함수를 통해 ListBox 와 유사한 기능을 수행합니다.