JS日积月累001 - rows 和 cells的使用

Table下面可以有thead和tbody两个分组对象,某些时候可以代替div使用,比如实现某部份表格隐藏。

tr是行,th或者td是列,这些对象构成表格阵列

每一个...就是我们所说得rows[id]

每一个...或者...就是cells[id]了

对于使用table来作为整个分组,我个人更喜欢tbody来代替table.

在table生命周期,只要我们知道tbody预设的id,我们就可以通过以下js代码获得这个tbody

document.getElementById(tbodyID);

js是弱类型语言,我们可以通过var一个对象来作为这个tbody的标记,然后就可以引用rows和cells了

var tbodyObj = document.getElementById(tbodyID);

tbodyObj.rows[rowID].cells[colID].innerText = "abcd";

tbodyObj.rows[rowID].cells[colID].innerHTML = "abcd

(innerHTML是指html代码,innerText是指显示的text);

通过以下例子来说说rows和cells的一些应用

代码:

<html>
	<head>
			<title>JS日积月累001 - rows 和 cells的使用</title>
			<script type="text/javascript">
				function validForm(curForm, bodyName){
					var bodyObj = document.getElementById(bodyName);
					var rowObj = null;
					var cellObj = null;
					
					if (bodyObj == null){
						return false;
					}
					
					// 引用rows
					for (var i = 0; i < bodyObj.rows.length; i ++){
						rowObj = bodyObj.rows[i];
						
						// 带*的必须输入,引用cells
						if (rowObj.cells[0].innerText.indexOf("*") > 0){
							if (rowObj.cells[1].childNodes[0].value == ""){
								alert(rowObj.cells[0].innerText.replace(" * :", "") + "不能为空!");
								return false;
							}
						}
					}
					
					alert("Pass validation");
					//curForm.submit();
				}
			</script>
	</head>
	<body>
		<form action="" method="post" name="loginFrm">
			<table>
			  <tbody id="validBody">
			    <tr>
			      <td align="right">用户名 <font color="red">*</font> :</td>
			      <td><input type="text" name="username" /></td>
			    </tr>
			    <tr>
			      <td align="right">密码 <font color="red">*</font> :</td>
			      <td><input type="password" name="username" /></td>
			    </tr>
			    <tr>
			      <td align="right">子系统 <font color="red">*</font> :</td>
			      <td>
			        <select name="systemname">
			          <option value="">---请选择---</option>
			          <option value="HR">人力资源系统</option>
			          <option value="PUR">采购系统</option>
			          <option value="SAL">销售系统</option>
			        </select>
			      </td>
			    </tr>
			  </tbody>
			  <tbody>
			  	<tr>
			  		<td colspan="2">
			  			<input type="button" value="提交" name="submit" onclick="validForm(this.form, 'validBody')"/>
			  			<input type="reset" value="Reset" name="reset"/>
			  		</td>
			  	</tr>
			  </tbody>
			</table>
		</form>
	</body>
</html>
 

 

你可能感兴趣的:(JavaScript,html)