JS DOM 을 어떻게 조작 하 는 지 표 기반 동적 디 스 플레이 데이터
나 는 일부 플러그 인 을 할 수 있다 는 것 을 알 고 있 지만,문 제 는 내 가 찾 는 그 플러그 인 이 동적 으로 데 이 터 를 업데이트 할 때 IE 메모리 가 계속 누적 되 어 마지막 에 붕괴 현상 을 일 으 킬 수 있다 는 것 이다.
다른 사람의 플러그 인 을 사용 하면 효과 가 좋 고 기능 이 많 지만 필요 한 JS 와 복잡 한 논리 가 있 습 니 다.문제 가 생기 면 처리 하기 어렵 습 니 다.
저도 더 이상 그것 을 연구 할 수 없습니다.제 가 직접 손 으로 써 보 겠 습 니 다.비록 좋 은 효과 가 없고 추가 적 인 기능 이 없 지만 동적 표 데이터 갱신 을 실현 하면 요 구 를 충분히 만족 시 킬 수 있 습 니 다!
먼저 코드 를 모두 붙 이 고 이 코드 를 HTML 에 쓰 면 효 과 를 볼 수 있 습 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.table0 {
font-family: " ";
font-size: 14px;
width: 400px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #c4cdd4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c4cdd4;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #c4cdd4;
}
.table0 tr {
height : 25px;
padding-left:5px;
text-align: left;
}
.table0 th {
color: #4c7c9b;
font-weight: normal;
background-color: #f1f1f1;
height: 25px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
}
.table0 td {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c4cdd4;
}
</style>
<script language="javascript" type="text/javascript">
var istt = false;
var values = "";
function callback(){
if(istt){
values = "[{'a':1,'b':'1','c':'1','d':'1'},{'a':2,'b':'2','c':'2','d':'2'},{'a':3,'b':'3','c':'3','d':'3'},{'a':4,'b':'4','c':'4','d':'4'}]";
istt=false;
}else{
values = "[{'a':10,'b':'10','c':'10','d':'10'},{'a':20,'b':'20','c':'20','d':'20'},{'a':30,'b':'30','c':'30','d':'30'},{'a':40,'b':'40','c':'40','d':'40'}]";
istt=true;
}
if(null!=values&&''!=values){
fnDeleteXLRow(); //
var objs=eval(values); // JSON
for(var i=0;i<objs.length;i++){ //
var u = objs[i];
var tab=document.getElementById("proc"); //
var rows=tab.rows; // ROW
var row1=tab.insertRow(rows.length); // rows ， ， 0
row1.insertCell(0).innerHTML=" "+u.a; // insertCell ， 0
row1.insertCell(1).innerHTML=" "+u.b;
row1.insertCell(2).innerHTML=" "+u.c;
row1.insertCell(3).innerHTML=" "+u.d;
}
}
//
document.getElementById("endTime").value=curDateTime();
//
CollectGarbage();
//
setTimeout(callback, 1000);
}
// ，
function fnDeleteXLRow(){
var table = document.getElementById('proc');
var rowCount = table.rows.length; // ， ， 1
for(var i=1;i<rowCount;i++){
table.deleteRow(1); // ，
}
}
//
function curDateTime(){
var d = new Date();
var year = d.getYear();
var month = d.getMonth()+1;
var date = d.getDate();
var day = d.getDay();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var ms = d.getMilliseconds();
var curDateTime= year;
if(month>9)
curDateTime = curDateTime +"-"+month;
else
curDateTime = curDateTime +"-0"+month;
if(date>9)
curDateTime = curDateTime +"-"+date;
else
curDateTime = curDateTime +"-0"+date;
if(hours>9)
curDateTime = curDateTime +" "+hours;
else
curDateTime = curDateTime +" 0"+hours;
if(minutes>9)
curDateTime = curDateTime +":"+minutes;
else
curDateTime = curDateTime +":0"+minutes;
if(seconds>9)
curDateTime = curDateTime +":"+seconds;
else
curDateTime = curDateTime +":0"+seconds;
return curDateTime;
}
setTimeout(callback, 1000);
</script>
</head>
<body>
<div id="table_div" align="left">
<font size="2px"><b> ：</b></font><input type="text" id="endTime" value="00-00-00 00:00:00" readonly="readonly">
<br>
<table id="proc" width="98%" border="0" cellspacing="0" cellpadding="0" class="table0">
<tr>
<th> <b>A</b></th>
<th> <b>B</b></th>
<th> <b>C</b></th>
<th> <b>D</b></th>
</tr>
</table>
</div>
</body>
</html>
데 이 터 는 한 번 에 한 자릿수 이 고 한 번 에 열 자릿수 변화 이다.
다음은 실현 에 대해 간단히 말씀 드 리 겠 습 니 다.
데이터 원본 은 푸 시 할 수 있 습 니 다.Ajax 가 요청 할 수 있 습 니 다.데이터 원본 은 JSon 문자열 입 니 다.
JSon 을 분석 하고 대상 배열 을 반복 해서 얻 습 니 다.순환 할 때마다 한 줄 을 추가 한 다음 속성 에 따라 줄 에 셀 을 추가 하고 셀 의 내용 을 추가 합 니 다.원 하신 다 면 줄 과 셀 의 스타일 도 설정 할 수 있 습 니 다.
물론 매번 증가 하기 전에 제목 을 제외 한 모든 줄 을 지우 고 추가 해 야 합 니 다.
셀 을 삭제 하 는 방법:
// ，
function fnDeleteXLRow(){
var table = document.getElementById('proc');
var rowCount = table.rows.length; // ， ， 1
for(var i=1;i<rowCount;i++){
table.deleteRow(1); // ，
}
}순환 대상 줄 과 열 을 추가 하 는 코드:
for(var i=0;i<objs.length;i++){ //
var u = objs[i];
var tab=document.getElementById("proc"); //
var rows=tab.rows; // ROW
var row1=tab.insertRow(rows.length); // rows ， ， 0
row1.insertCell(0).innerHTML=" "+u.a; // insertCell ， 0
row1.insertCell(1).innerHTML=" "+u.b;
row1.insertCell(2).innerHTML=" "+u.c;
row1.insertCell(3).innerHTML=" "+u.d;
}var row1cell0=row1.insertCell(0);
//지정 한 열의 스타일
row1cell0.className="m_td1";
줄 이나 열의 스타일 을 지정 합 니 다.그러나 일반적으로 우 리 는 표를 스타일 참조 로 설정 한 다음 이 스타일 에서 처리 하면 됩 니 다.
<table id="proc" width="98%" border="0" cellspacing="0" cellpadding="0" class="table0"> 스타일:
<style type="text/css">
.table0 {
font-family: " ";
font-size: 14px;
width: 400px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #c4cdd4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c4cdd4;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #c4cdd4;
}
.table0 tr {
height : 25px;
padding-left:5px;
text-align: left;
}
.table0 th {
color: #4c7c9b;
font-weight: normal;
background-color: #f1f1f1;
height: 25px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
}
.table0 td {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c4cdd4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c4cdd4;
}
</style>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
