js动态插入行时的样式问题

最近一直乱七八糟的忙，也没啥大的成果，倒是js稍微有了点进步了。以前写过用js动态插入行的代码，这次做的时候，以为没啥问题，但是这次因为碰到样式，也遇到了挺多的问题，网上的例子虽然也能把行和内容都插入进去，但是都没碰到怎么设置样式的，一顿研究之后，总算弄好了。

 

代码：

 

1、原来的表格

<table width="98%" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#bbbbbb" id="business"> <tr class="tab_cell" align="center" valign="middle" > <td nowrap ><input type="checkbox" name="bus_check_0" id="bus_check_0" /></td> <td> <input type="hidden" id='bus_logger' name="bus_logger" value="1" /> <!-- bus_logger 是计数用的，因为在父子页面传值的时候，必须明确指明要操作父页面的哪个元素 但是父页面中的元素是动态生成的，如果不用计数器， 那么就会生成具有相同的name和相同的id的元素，从而导致子页面无法操作父页面的元素。 --> <input type="text" name="bus_sort_0" disabled class="input_bodeor" /> <img src="img/flowatch.gif" mce_src="img/flowatch.gif" align="absmiddle" onclick="getBusinesssortList('bus_sort_0', 'numsortid1_');"/> <input type="hidden" name="numsortid1_" /> </td> <td> <input type="text" name="numcostamount1_" id="numcostamount1_" class="input_bodeor" onpropertychange="calcAmount('numcostamount1_', 'bus_span_num', 'bus_span_char');" /> <!-- 金额 --></td> <td> <input type="text" name="vc2summary1_" id="vc2summary1_" value="" class="input_bodeor" /> <!-- 业务摘要 --></td> <td> <input type="text" name="numprojectid1text_" id="numprojectid1text_" disabled class="input_bodeor" /> <img src="img/flowatch.gif" mce_src="img/flowatch.gif" align="absmiddle" onclick="getProjectList('numprojectid1text_', 'numprojectid1_0');" /> <input type="hidden" name="numprojectid1_" id="numprojectid1_0"/> </td> <td nowrap> </td> </tr> </table> <table width="98%" id = "tb1"> <tr> <td width="90%"> </td> <td width="5%" align="right"><input type="button" class="bt" onclick="addBusinessRow('business')" value="增加一行"></td> </tr> </table>

 

2、动态添加行的代码

function addBusinessRow(obj) { var num = document.all.bus_logger.value; document.all.bus_logger.value=(document.all.bus_logger.value*1)+1; //添加一行 var newTr = eval("document.all[" + "/"" + obj + "/"" + "]").insertRow(); newTr.className = "tab_cell"; newTr.align = "center"; newTr.valign = "middle"; //增加列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); var newTd4 = newTr.insertCell(); var newTd5 = newTr.insertCell(); //生成的元素有相同的name是为了服务器取值，不同的id是为了在父子页面传值的时候能够精确操作想操作的元素 newTd0.innerHTML = "<input type='checkbox' id='bus_check_'" +num + "id='bus_check_0' />"; newTd1.innerHTML = "<input type='text' name='numsortid1text_' id='numsortid1text_" +num + "' disabled class=/"input_bodeor/" />" + "<img src="img/flowatch.gif" mce_src="img/flowatch.gif" align='absmiddle' onclick='getBusinesssortList(" +"/"numsortid1text_" + num + "/", /"numsortid1_" + num + "/")' />" + "<input type='hidden' name='numsortid1_' id='numsortid1_" +num + "' />"; newTd2.innerHTML = "<input type='text' name='numcostamount1_' id='numcostamount1_" +num + "' value='' class=/"input_bodeor/" onpropertychange=/"calcAmount('numcostamount1_', 'bus_span_num', 'bus_span_char');/" />"; newTd3.innerHTML = "<input type='text' name='vc2summary1_' id='vc2summary1_" +num + "' value='' class=/"input_bodeor/" />"; newTd4.innerHTML = "<input type='text' name='numprojectid1text_' id='numprojectid1text_" +num + "' disabled class=/"input_bodeor/" >" + "<img src="img/flowatch.gif" mce_src="img/flowatch.gif" align='absmiddle' onclick='getProjectList(" +"/"numprojectid1text_" + num + "/", /"numprojectid1_" + num + "/")' />" + "<input type='hidden' name='numprojectid1_' id='numprojectid1_" +num + "' />"; newTd5.innerHTML = "<input name='button' class='bt' type='button' onclick=/"delRow(this.parentElement.parentElement);calcBusAmount('numcostamount1_', 'bus_span_num', 'bus_span_char');/" value='/u5220/u9664' />"; }

 

3、删除行的代码

//删除行 function delRow(src) { src.parentElement.deleteRow(src.rowIndex); } 

 

 

 

话说动态插入删除行的代码都是从网上找的，就是弄样式的时候死活都弄不上，后来也是在网上一顿搜，总算找到了用js控制样式的办法，就是简单的一句话newTr.className = "tab_cell";  那个tab_cell就是要应用的样式的名称。

 

 

感谢各个前辈们。另外，自己知道代码写的很乱，目前水平还很低，希望看到的人别笑话