JavaScript相关知识

本文介绍如何使用JavaScript进行HTML表格的操作,包括隐藏表格行、动态设置单元格内容及生成表格等实用技巧。
如何隐藏table中的某几行呢? 
只要为你要隐藏的行设置好id就可以了。 
<table> 
<tr id=aaa>
<td>aaa</td>
</tr> 
<tr id=bbb>
<td>bbb</td>
</tr> 
<tr>
<td>ccc</td>
</tr>
</table>
<script language="javascript"> 
document.getElementById("aaa").style.display="none"; 
document.getElementById("bbb").style.display="none"; 
</script>
如何用javascript动态设置td的值?
<table> <tr> <td id="tdSee"> </td> </tr> </table> 
<hr /> 
<input id="tdStr" type="text" value="xxx" />
<input value="设置给td" type="button" onclick="changTD()" />
<script language="javascript">
function changTD(){
document.getElementById("tdSee").innerHTML=document.getElementById("tdStr").value 
}
</script>

 
动态生成表格 
<script language="javascript">
function add_row(){
if ((document.getElementById("name").value=="")||(document.getElementById("pass").value==""))
{
   alert("值不能为空"); 
   return 0;
}
var tableobj=document.getElementById("table_1");
var rowobj=tableobj.insertRow(tableobj.rows.length);
var cell1=rowobj.insertCell(rowobj.cells.length);
var cell2=rowobj.insertCell(rowobj.cells.length); 
var cell3=rowobj.insertCell(rowobj.cells.length); 
cell1.innerHTML=document.getElementById("name").value; 
cell2.innerHTML=document.getElementById("pass").value;
cell3.innerHTML=
"<input type='button' value='删除' onclick='delete_row("+(tableobj.rows.length-1)+");leo()'>";
document.getElementById("name").value="";
document.getElementById("pass").value="";
 }
function leo()  //当删除一行后,对各行重新建立索引!!! ——leo
{
var tableobj=document.getElementById("table_1");
for(i=1;i<tableobj.rows.length;i++) 
 {      
tableobj.rows[i].cells[2].innerHTML=
"<input type='button' value='删除' onclick='delete_row("+i+");leo()'>"; 
  } 
}
function delete_row(i)
{ 
var tableobj=document.getElementById("table_1"); alert("删除第"+i+"行"); 
tableobj.deleteRow(i); 
} 
</script>
<div align="center">
<input name="name" type="text">
<input name="pass" type="text"> 
<input name="add" type="button" onClick="add_row()" value="添加"> 
</div> 
<div align="center"> 
<table id="table_1" border="1">
<tr> <td>帐号</td><td>密码</td><td>操作</td> </tr> 
</table> 
</div> 
 JavaScript的Table表格对象
Table对象集合
集合 描述
cells[]获取包含表格中所有单元格的数组
rows[]获取包含表格中所有行的数组
tBodies[]获取包含表格中所有tbody的数组
Table对象属性
border设置或获取表格边框
caption设置或获取表格标题
cellPadding设置或获取每个单元格边框与内容的宽度
cellSpacing设置或获取表格中单元格的间距
frame设置或获取表格具有哪些边框
rules设置或获取表格中的内部边框
summary设置或获取表格的描述
tFoot获取表格的tFoot对象
tHead获取表格的tHead对象
width设置或获取表格宽度
Table对象方法
createCaption()为表格创建一个空的标题元素
createTFoot()为表格创建一个空的tFoot元素
createTHead()为表格创建一个空的tHead元素
deleteCaption()删除表格的标题元素
deleteRow()删除指定的表格行
deleteTFoot()删除表格的tFoot元素
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值