js动态插入行时的样式问题
2010-12-24 18:33
302 查看
最近一直乱七八糟的忙,也没啥大的成果,倒是js稍微有了点进步了。以前写过用js动态插入行的代码,这次做的时候,以为没啥问题,但是这次因为碰到样式,也遇到了挺多的问题,网上的例子虽然也能把行和内容都插入进去,但是都没碰到怎么设置样式的,一顿研究之后,总算弄好了。
代码:
1、原来的表格
2、动态添加行的代码
3、删除行的代码
话说动态插入删除行的代码都是从网上找的,就是弄样式的时候死活都弄不上,后来也是在网上一顿搜,总算找到了用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就是要应用的样式的名称。
感谢各个前辈们。另外,自己知道代码写的很乱,目前水平还很低,希望看到的人别笑话
相关文章推荐
- 使用前端框架后js动态改变样式的一些问题(select)
- js动态在form上插入enctype=multipart/form-data的问题
- 解决js动态插入JQuery轮播图片出现的问题
- 解决jquery或js动态添加easyUI元素时样式失效问题
- js 动态插入表格设置样式 js设置样式
- js动态插入表格设置表格样式
- js动态在form上插入enctype=multipart/form-data的问题
- 关于js动态添加的时候样式失效的问题
- js动态在form上插入enctype=multipart/form-data的问题
- 关于使用JS动态修改CSS样式问题
- js的element.style.xx只能获取内联样式的问题
- form表单 无法提交js动态添加的表单元素问题。。
- js在head里插入style样式
- 解决ie7和360不兼容的样式和js等问题。
- 解决vue.js使用ckeditor的样式路径问题
- js解决ie8浏览器png图片使用动态效果时,出现黑边问题
- IE7中英文混合文本的字体样式控制问题,使用js解决
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- js动态生成input指定My97DatePicker时间问题
- 解决ie动态修改link样式,import css不刷新的问题