2.header中添加js代码
> 웹 프론트엔드 > JS 튜토리얼 > Node.js는 지정된 행 수_javascript 기술을 사용하여 테이블을 동적으로 생성합니다.

Node.js는 지정된 행 수_javascript 기술을 사용하여 테이블을 동적으로 생성합니다.

WBOY
풀어 주다: 2016-05-16 17:29:09
원래의
1292명이 탐색했습니다.

다음 js 구현을 사용하여 사용자가 요구하는 행 수로 테이블을 생성할 수 있습니다.
1. 먼저 사용자가 입력한 행 값을 가져오기 위해 본문에 다음 코드를 입력합니다.

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





동적으로 테이블 생성
input id="Cold" type="text" class="input" size="10" name="Num"/>row

< /br>

>효과는 다음과 같습니다.

Node.js는 지정된 행 수_javascript 기술을 사용하여 테이블을 동적으로 생성합니다.2.헤더에 js 코드 추가

코드 복사 코드는 다음과 같습니다.
<script> <br>function table() { <br>if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search ("^[0-9]* $") == -1) { <br>document.getElementById("errmsg1").style.display = "block";//Num이 비어 있는지 숫자가 아닌지 판단하고 오류 메시지 <br>document.getElementById("errmsg1 ").innerHTML = "프롬프트 메시지: 행 번호가 비어 있거나 숫자가 아닙니다! " <br>} <br>else { <br>document.getElementById(" errmsg1").style.display = "none";// 프롬프트 정보 숨기기<br>var Num =parseInt(document.getElementById("Num").value); //행 수 가져오기<br>var flag = true; <br>var data = ""; <br>data = " <table >" <br>data = " <tr>"<td > " <br>"<td >zhuzhu</td>" <br>"<td >dudu</td>" <br>"</tr>" ; <br>for (var i = 1; i <= Num; i ) { <BR>data = "<tr >" <br>data = "</td>" <br> <td><input name='ColdDay" i "' type ='text' class='input'></td>"; <br>data = "<td><입력 이름=' ColdCureMethod" i "' type='text' class='input'&gt ;</td>"; <br>data = "</tr>"; <br>} <br>data = "</ table>"; <br>document.getElementById("div1").style.display = "block"; <br>document.getElementById("table1").innerHTML = data; <br>} <br>} <br></script>


생성 효과는 다음과 같습니다.


3. 모든 코드는 다음과 같습니다. Node.js는 지정된 행 수_javascript 기술을 사용하여 테이블을 동적으로 생성합니다.

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

<%@ page 언어="java" import="java.util.*" pageEncoding="utf-8"%>
<%
문자열 경로 = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 경로 "/";
%>


<머리>

테스트






<스크립트>
함수 테이블() {
if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]* $") == -1) {
document.getElementById("errmsg1").style.display = "block";//判断payNum是否为空或不是数字 提示错误
document.getElementById("errmsg1 ").innerHTML = "여행은 공허한 여행이 아닙니다!";
}
else {
document.getElementById("errmsg1").style.display = "none";//隐藏提示信息
var Num =parseInt(document.getElementById("Num") .값); //获取分期数
var flag = true;
var 데이터 = "";
data = " <테이블 >";
데이터 = " "
"우리는"
"주주"
"두두"
"" ;
for (var i = 1; i <= Num; i ) {
data = "";
데이터 = "" 나는 "";
data = "<입력 이름='ColdDay" i "' type='text' 클래스='input'>";
data = "<입력 이름='ColdCureMethod" i "' type='text' 클래스='입력'>";
데이터 = "";
}
data = "";
document.getElementById("div1").style.display = "차단";
document.getElementById("table1").innerHTML = 데이터;
}
}


<본문>




<테이블>

动态生成表格

















관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿