js如何操作table,tr,td
展开全部
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");//创建tdcell.appendChild(document.createTextNode(name));//td里注入文本row.appendChild(cell);//将TD注入TRvar 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注入TRdocument.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中没有内容或者没有可见元素时，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;一起使用。*/ }
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
