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

最新推荐文章于 2022-01-13 16:09:56 发布

BenBHX

最新推荐文章于 2022-01-13 16:09:56 发布

阅读量465

点赞数

分类专栏： UI.JS 文章标签： JavaScript HTML ViewUI

UI.JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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" οnclick="validForm(this.form, 'validBody')"/>
			  			<input type="reset" value="Reset" name="reset"/>
			  		</td>
			  	</tr>
			  </tbody>
			</table>
		</form>
	</body>
</html>

BenBHX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS日积月累001 - rows 和 cells的使用

Table下面可以有thead和tbody两个分组对象，某些时候可以代替div使用，比如实现某部份表格隐藏。tr是行，th或者td是列，这些对象构成表格阵列每一个...就是我们所说得rows[id]每一个...或者...就是cells[id]了对于使用table来作为整个分组，我个人更喜欢tbody来代替table.在table生命周期，只要我们知道tbody预设的id,我们就...
复制链接

扫一扫