当前位置：A5下载 > 书籍教程 > 网页制作 > 网页制作综合 > js如何操作table,tr,td

js如何操作table,tr,td

软件大小：1 KB
软件语言：简体中文
更新时间：2013-03-30
软件类型：国产软件 / 网页制作综合
运行环境：Win2003,WinXP,Win2000,Win9X
软件授权：免费软件
官方主页：http://
软件等级 :
软件厂商：qazwsxzxc

立即高速安全下载

介绍说明
下载地址
精品推荐
相关软件
网友评论

1，Javascript操作table,tr,td ，代码如下：

function messageSort() { --函数名
var message=document.getElementById("message").value; --添加的内容(下面有对应的html)
if(name == "" ) return; --如果添加为空,返回
var row = document.createElement("tr"); //创建tr的
row.setAttribute("id", name); --设置row的属性.
var cell = document.createElement("td");//创建td
cell.appendChild(document.createTextNode(name));//td里注入文本
row.appendChild(cell);//将TD注入TR

var deleteButton = document.createElement("input"); //这部分是添加删除button按钮
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteSort(name); };
cell = document.createElement("td");
cell.appendChild(deleteButton);//注入按钮
row.appendChild(cell);//将TD注入TR
document.getElementById("sortList").appendChild(row);//将TR注入到相应地方(sortList可以看下面html)
var cell5 = document.createElement("td");

cell.style.background="#ffffff";//背景颜色设置

row1.style.color="#ffffff"; //字体颜色设置
cell5.style.display = "none" ; //ie不支持setAttribute("style", "display:none");

// <td style="display:none" >dd</td> 直接写TD是这样..
cell5.appendChild(document.createTextNode(zdid));
row.appendChild(cell5);

}
// 删除内容
function deleteSort(id) {//这个函数为上面的删除button调用的
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" width="400" bgcolor="#f5efe7">
<tr>
    <td height="20">增加内容:</td>
    <td><input id="message" type="text"></td>
    <td><a href="javascript:messageSort();">添加</a></td>
</tr>
</table>
<table border="1" width="400">
<tr>
    <td height="20" align="center">内容:</td>
    <td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</body>

2，一般情况下定义一个效果良好的表格采用下面的属性定义方式

代码：

当某个td中没有内容或者没有可见元素时，td的border也会消失。解决方案就是给table添加样式border-collapse:collapse

代码段：

.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

3，但对于表格table来讲是有些不同，

代码段：

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}