服务器软件 网络软件 应用软件 系统工具 图形图像 多媒体 杀毒安全 游戏 DLL文件
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
网站源码下载
当前位置:A5源码 > 书籍教程 > 网页制作 > 网页制作综合 > js如何操作table,tr,td

js如何操作table,tr,td

  • 资源链接:[ 下载地址 ]  [ 评论报错 ]
  • 授权方式:免费软件
  • 界面语言:简体中文
  • 文件大小:1 KB
  • 更新时间:2013-03-30
  • 资源类型:国产软件
  • 推荐等级:★★★☆☆
  • 平台环境:Win2003,WinXP,Win2000,Win9X
  • 作者主页:点击查看
  • 演示地址:点击查看
详细介绍 - [ js如何操作table,tr,td ]

 1Javascript操作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一般情况下定义一个效果良好的表格采用下面的属性定义方式

代码:

<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" 
style='border-collapse:collapse;table-layout: fixed'></table> 

当某个td中没有内容或者没有可见元素时,tdborder也会消失。解决方案就是给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;一起使用。*/ 

下载地址 - [ js如何操作table,tr,td ]
网友对“js如何操作table,tr,td”的评论
您喜欢这个软件么?
(0)
0%
(0)
0%
[ 下载地址 ][ 评论吐槽 ]
本类热门软件
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话