Js 动态添加table时 样式无法显示 求解~~~~~

仰望yi苍穹 2012-03-22 08:55:19
我想创建一个这样的一个<td>

<td width="25%" height="70" align="center">
<table width="183" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top" class="button_back">
<table width="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13"></td>
</tr>
<tr>
<td class="button_font"><a href="#" class="a2" onClick="javascript:window.parent.addTab('<%=shortCutList.get(index).get("URL")%>','<%=shortCutList.get(index).get("NAME")%>');"><%=shortCutList.get(index).get("NAME")%></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>

具体创建过程是这样的：
function createTd(url,name){
var topTd = document.createElement("td");
topTd.setAttribute('width','25%');
topTd.setAttribute('height','70');
topTd.setAttribute('align','center');

var table = document.createElement("table");
table.setAttribute('width','183');
table.setAttribute('border','0');
table.setAttribute('cellspacing','0');
table.setAttribute('cellpadding','0');

var tr = document.createElement("tr");

var td = document.createElement("td");
td.setAttribute('align','right');
td.setAttribute('valign','top');
td.setAttribute('class','button_back');

var innerTable = document.createElement("table");
innerTable.setAttribute('width','131');
innerTable.setAttribute('border','0');
innerTable.setAttribute('cellspacing','0');
innerTable.setAttribute('cellpadding','0');

var innerTableTr1 = document.createElement("tr");

var innerTableTd1 = document.createElement("td");
innerTableTd1.setAttribute('height','13');

var innerTableTr2 = document.createElement("tr");

var innerTableTd2 = document.createElement("td");
innerTableTd2.setAttribute('class','button_font');

var tdHref = document.createElement("a");
tdHref.setAttribute('href','#');
tdHref.setAttribute('class','a2');
tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
tdHref.innerHTML = name;

innerTableTd2.appendChild(tdHref);
innerTableTr2.appendChild(innerTableTd2);

innerTableTr1.appendChild(innerTableTd1);

innerTable.appendChild(innerTableTr1);
innerTable.appendChild(innerTableTr2);

td.appendChild(innerTable);

tr.appendChild(td);

table.appendChild(tr);

topTd.appendChild(table);

return topTd;
}
但是穿件之后 添加到table中 无法显示样式 连接点了也没有效果 求高手
...全文
747 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
我爱小土豆 2012-03-27
  • 打赏
  • 举报
 回复
[Quote=引用楼主 champ_m 的回复:]
我想创建一个这样的一个<td>

<td width="25%" height="70" align="center">
<table width="183" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top" class="button_back">
……
[/Quote]

1.element 要用 getElementById or ByTagName 来得到，
2.setAttribute("class", vName) 中 class 是指改变 "class" 这个属性，所以要带引号。
3.IE 中要把 class 改成 className,.....IE 不认 class, 所以最好写两句，都用上吧。
W3C DOM - {setAttribute()}
setAttribute(string name, string value) ：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
 
1 、关于 class 和 className
class 属性在 W3C DOM 中扮演着很重要的角色，但由于浏览器差异性仍然存在。使用setAttribute("class", vName) 语句动态设置
Element 的 class 属性在 firefox 中是行的通的，在 IE 中却不行。因为使用 IE 内核的浏览器不认识 "class" ，要改用 "className" ；
同样， firefox  也不认识 "className" 。所以常用的方法是二者兼备：
   element.setAttribute("class", vName);
   element.setAttribute("className", vName);  //for IE
 
2 、 setAttribute() 的差异
我们经常需要在 JavaScript 中给 Element 动态添加各种属性，这可以通过使用 setAttribute() 来实现，这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用 setAttribute 指定 e 的 onclick 属性，简单，很好理解。但是 IE 不支持， IE 并不是不支持 setAttribute这个函数，
而是不支持用 setAttribute 设置某些属性，例如对象属性、集合属性、事件属性，也就是说用 setAttribute 设置style 和 onclick 这些属性
在 IE 中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置 Element 的对象属性、集合属性和事件属性。
document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); 、
还在加载中灬 2012-03-27
  • 打赏
  • 举报
 回复
你是说，添加新的单元格后，破坏了原来表格的样式？

如果是这样，我的理解应该是 topTd 的width="25%"的原因


<html>

<head>

<style>#at td{background:black;}</style>

</head>

<body>

<script type="text/javascript">

function createTd(url,name){



///////////////////////////////



 var innerTableTd1 = document.createElement("td");

 innerTableTd1.setAttribute('height','13');



 var innerTableTr1 = document.createElement("tr");



 innerTableTr1.appendChild(innerTableTd1);



 var tdHref = document.createElement("a");

 tdHref.setAttribute('href','#');

 tdHref.setAttribute('class','a2');

 tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");

 tdHref.innerHTML = name;



 var innerTableTd2 = document.createElement("td");

 innerTableTd2.setAttribute('class','button_font');



 var innerTableTr2 = document.createElement("tr");



 innerTableTd2.appendChild(tdHref);

 innerTableTr2.appendChild(innerTableTd2);



 var tbody = document.createElement("tbody");



 tbody.appendChild(innerTableTr1);

 tbody.appendChild(innerTableTr2);



 var innerTable = document.createElement("table");

 innerTable.setAttribute('width','131');

 innerTable.setAttribute('border','0');

 innerTable.setAttribute('cellspacing','0');

 innerTable.setAttribute('cellpadding','0');



 innerTable.appendChild(tbody);



////////////////////////////////////



 var td = document.createElement("td");

 td.setAttribute('align','right');

 td.setAttribute('valign','top');

 td.setAttribute('class','button_back');



 td.appendChild(innerTable);



 var tr = document.createElement("tr");



 tr.appendChild(td);



 var tbody1 = document.createElement("tbody");



 tbody1.appendChild(tr)



 var table = document.createElement("table");

 table.setAttribute('width','183');

 table.setAttribute('border','0');

 table.setAttribute('cellspacing','0');

 table.setAttribute('cellpadding','0');



 table.appendChild(tbody1);



 var topTd = document.createElement("td");

 //topTd.setAttribute('width','25%');

 topTd.setAttribute('height','70');

 topTd.setAttribute('align','center');



 topTd.appendChild(table);



 return topTd;

 }

</script>

<table id="start" border="1">

	<tr onclick="alert(this.cells.length);">

		<td width="30px" height="30px"></td>

		<td width="30px" ></td>

		<td width="30px" ></td>

		<td width="30px" ></td>

	</tr>

	<tr onclick="alert(this.cells.length);">

		<td width="30px" height="30px"></td>

		<td width="30px" ></td>

		<td width="30px" ></td>

		<td width="30px" ></td>

	</tr>

</table>

<script type="text/javascript">

var   table   =   document.getElementById( 'start');//获取table 

var   tableRows   =   table.rows;//获取table有多少行

var   lastRow   =   table.rows[tableRows.length-1];//获取最后一行

var   cellsLength   =   lastRow.cells.length; //获取最后一行有几列元素

//var   tableBody   =   table.firstChild;//获取tbody 

var   tableBody=table.getElementsByTagName("tbody")[0];//兼容FF方式~

//var   lastchild   =   tableBody.lastChild;//获取tbody的最后一个 </tr> 

var   lastchild=lastRow;//兼容FF方式~



var url="我是一个可耻的地址",name="我是一个可耻的名字";

if(cellsLength   !=   4){

 var   td   =   createTd(url,name); 

 lastchild.appendChild(td); 

}else{ 

 var   td   =   createTd(url,name); 

 var   tr   =   document.createElement( 'tr'); 

 tr.appendChild(td); 

 tableBody.appendChild(tr); 

}

</script>

</body>

</html>
仰望yi苍穹 2012-03-27
  • 打赏
  • 举报
 回复
在外层 我已经创建好了一个
<table id="start">
<tr>....</tr>
....
<tr>
<***********>
</tr>
</table>

我就是想把创建好的td放到<***********>的位置
var table = document.getElementById('start');//获取table
var tableRows = table.rows;//获取table有多少行 var lastRow = table.rows[tableRows.length-1];//获取最后一行 var cellsLength = lastRow.cells.length; //获取最后一行有几列元素 var tableBody = table.firstChild;//获取tbody
var lastchild = tableBody.lastChild;//获取tbody的最后一个</tr>

if(cellsLength != 4){ var td = createTd(url,name);
lastchild.appendChild(td);
}else{
var td = createTd(url,name);
var tr = document.createElement('tr');
tr.appendChild(td);
tableBody.appendChild(tr);
}

我具体想做的是这样一个table 每行4列， 如果最后一列没有达到4列，则将创建的<td>添加到该列上，如果最后一行已经是4列，就会新创建一个<tr>,并将新创建的<td>放到这个<tr>上，添加是可以添加上去，就是没有前面的样式
还在加载中灬 2012-03-26
  • 打赏
  • 举报
 回复 


<body>

<script type="text/javascript">

function createTd(url,name){



//我整理如下



//以下是内嵌innerTable



 var innerTableTd1 = document.createElement("td");

 innerTableTd1.setAttribute('height','13');



 var innerTableTr1 = document.createElement("tr");



 innerTableTr1.appendChild(innerTableTd1);



 var tdHref = document.createElement("a");

 tdHref.setAttribute('href','#');

 tdHref.setAttribute('class','a2');

 tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");

 tdHref.innerHTML = name;



 var innerTableTd2 = document.createElement("td");

 innerTableTd2.setAttribute('class','button_font');



 var innerTableTr2 = document.createElement("tr");



 innerTableTd2.appendChild(tdHref);

 innerTableTr2.appendChild(innerTableTd2);



 var tbody = document.createElement("tbody");



 tbody.appendChild(innerTableTr1);

 tbody.appendChild(innerTableTr2);



 var innerTable = document.createElement("table");

 innerTable.setAttribute('width','131');

 innerTable.setAttribute('border','0');

 innerTable.setAttribute('cellspacing','0');

 innerTable.setAttribute('cellpadding','0');



 innerTable.appendChild(tbody);



//至此



 var td = document.createElement("td");

 td.setAttribute('align','right');

 td.setAttribute('valign','top');

 td.setAttribute('class','button_back');



 td.appendChild(innerTable);



 var tr = document.createElement("tr");



 tr.appendChild(td);



 var tbody1 = document.createElement("tbody");



 tbody1.appendChild(tr)



 var table = document.createElement("table");

 table.setAttribute('width','183');

 table.setAttribute('border','0');

 table.setAttribute('cellspacing','0');

 table.setAttribute('cellpadding','0');



 table.appendChild(tbody1);



return table;



//我不知道 您把topTd放哪了，所以我就上面的table返回出来测试，貌似没问题



 var topTd = document.createElement("td");

 topTd.setAttribute('width','25%');

 topTd.setAttribute('height','70');

 topTd.setAttribute('align','center');



 topTd.appendChild(table);



 return topTd;

 }

document.body.appendChild(createTd(123,123));

</script>

</body>
仰望yi苍穹 2012-03-26
  • 打赏
  • 举报
 回复
function createTd(url,name){
var topTd = document.createElement("td");
topTd.setAttribute('width','25%');
topTd.setAttribute('height','70');
topTd.setAttribute('align','center');

var table = document.createElement("table");
table.setAttribute('width','183');
table.setAttribute('border','0');
table.setAttribute('cellspacing','0');
table.setAttribute('cellpadding','0');

var tr = document.createElement("tr");

var td = document.createElement("td");
td.setAttribute('align','right');
td.setAttribute('valign','top');
td.setAttribute('class','button_back');

var innerTable = document.createElement("table");
innerTable.setAttribute('width','131');
innerTable.setAttribute('border','0');
innerTable.setAttribute('cellspacing','0');
innerTable.setAttribute('cellpadding','0');

var innerTableTr1 = document.createElement("tr");

var innerTableTd1 = document.createElement("td");
innerTableTd1.setAttribute('height','13');

var innerTableTr2 = document.createElement("tr");

var innerTableTd2 = document.createElement("td");
innerTableTd2.setAttribute('class','button_font');

var tdHref = document.createElement("a");
tdHref.setAttribute('href','#');
tdHref.setAttribute('class','a2');
tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
tdHref.innerHTML = name;

var tbody = document.createElement("tbody");
var tbody1 = document.createElement("tbody");

innerTableTd2.appendChild(tdHref);
innerTableTr2.appendChild(innerTableTd2);

innerTableTr1.appendChild(innerTableTd1);

tbody.appendChild(innerTableTr1);
tbody.appendChild(innerTableTr2);

innerTable.appendChild(tbody);

td.appendChild(innerTable);

tr.appendChild(td);

tbody1.appendChild(tr)
table.appendChild(tbody1);

topTd.appendChild(table);

return topTd;
}
仰望yi苍穹 2012-03-26
  • 打赏
  • 举报
 回复
按照 3楼的改了 但是还没起到效果
Leo2048 2012-03-22
  • 打赏
  • 举报
 回复
在代码中加个alert语句看有没有undefined的，或者设个断点debugger，在IE中调试一下
greency 2012-03-22
  • 打赏
  • 举报
 回复
同意LS 或者用jquery也比较简单
还在加载中灬 2012-03-22
  • 打赏
  • 举报
 回复
[Quote=引用楼主 champ_m 的回复:]
......

table.appendChild(tr);

......
[/Quote]
IE中，这句是无效的
在IE中，table不能直接appendChild(tr)

要由tbody.appendChild(tr)



<body>

<script type="text/javascript">

function abc(){

var row = document.createElement( "tr" );

var cell = document.createElement( "td" );

var tbody = document.createElement("tbody");

var table = document.createElement("table");

var cell_text = document.createTextNode( " 插 入的内容 " );

cell.appendChild(cell_text);

row.appendChild(cell);

tbody.appendChild(row);

table.appendChild(tbody);

var div1=document.getElementById("div1");

div1.appendChild(table);

}



</script>

<div id="div1"></div>

</body>

你参考一下这
Acesidonu 2012-03-22
  • 打赏
  • 举报
 回复
分块注释，看看那有问题
m540920181 2012-03-22
  • 打赏
  • 举报
 回复
点击事件，就没效果？？？
那应该是js写的有问题
JQuery给table动态增加样式
这篇博客介绍了如何使用JQuery操作DOM，特别是在表格（table）上应用动态样式。通过mouseover和mouseout事件，实现了鼠标悬停时添加和移除class的效果，同时也展示了点击行触发颜色变化的功能。此外，还涵盖了添加alt、odd、last等类，以及通过click事件实现的行显示和隐藏的交互效果。
利用Javascript向页面中插入TABLE，IE下无法正常显示
本文介绍了一个关于使用JavaScript动态创建TABLE元素时，在Internet Explorer浏览器下无法正常显示的问题及解决方案。通过对比Firefox的表现，发现缺少TBODY元素是导致IE不显示表格的原因。
js动态添加表格设置样式 insertRow() 设置样式
本文介绍了如何使用JavaScript动态创建表格并设置样式的两种方法：通过设置CSS class和直接设置style属性。示例代码中展示了如何添加行、单元格，并调整背景色和边框等样式。
bootstrap table样式丢失
在使用Bootstrap的表格布局并用AJAX获取数据后动态添加内容时，遇到样式失效的问题。原因是直接在<table>标签内追加内容。解决办法是将动态内容添加到标签中，以保持样式正常显示。
javascript表格动态添加行,添加列,js,table,tr,td
本文介绍了一种使用JavaScript实现HTML表格中动态添加和删除行的方法，并提供了完整的代码示例。这种方法适用于需要用户动态输入多行数据的场景。
JavaScript

87,989

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章