您的位置:首页 > Web前端 > CSS

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

2010-12-24 18:33 302 查看
最近一直乱七八糟的忙,也没啥大的成果,倒是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就是要应用的样式的名称。

感谢各个前辈们。另外,自己知道代码写的很乱,目前水平还很低,希望看到的人别笑话
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: