JavaScript 字符串替换和DOM操作技巧

最低一直在写JavaScript,就本人遇到的两个问题以及解决方法给大家分享一下.
1,点击一个按钮,创建一段HTML代码和现有的一模一样,但是里面所有ID的参数和方法里面的参数要改变,参数都是若干个字母+数字组成.新创建出来的HTML代码片段要里面的参数变成字母不变,数字要+1.
如,变之前的代码,

<div id=”testdiv1”>   <input type=”button” value=”点击测试” onclick=”testFunction(‘testdiv1’)”>   …..相当多的HTML代码.与以上类似 </div>

新创建出来的代码片段:

<div id=”testdiv2”>   <input type=”button” value=”点击测试” onclick=”testFunction(‘testdiv2’)”>   …..相当多的HTML代码.与以上类似 </div>

多次点击会依次类加的.(注意前后的变化),大量字符的操作大家已猜到,非正则莫属,基于这种思想,经过本人的研究,总算是实现了.要借助于JS里面的replace方法
下面贴出来我的代码给大家分享一下..

var gzjl = document.getElementById("jyxlDiv");//拿到被复制的对象 var gzcon = document.createElement("div");//创建一个新的DIV gzcon.setAttribute("id","jyjl" + jyxl );//为新的DIV设置值 gzjl.appendChild(gzcon);//把新的DIV加在原来DIV的后面 var gzconId = document.getElementById("jyjl" + jyxl);//取得新创建的DIV对象 //拼装相关的内容 var tarcon = document.getElementById("jyjl0" ).innerHTML ;//拿到要复制的对象里面的HTML代码 //对有关的内容进行拼装 var reg = /(id=/w+|'/w+)(/d{1})/g ;//匹配的正则表达式,这里用到了正则的分组 tarcon = tarcon.replace(reg,"$1"+jyxl);// 这是关键,用到了字符串的replace方法,两个参数,1,正则表达式,2,要替换的内容.$1指的是正则里面的第一组,以此类推 gzconId.innerHTML = tarcon;

 
2,操作表格,动态在表格里面添加一行和删除一行.(DOM操作表格)
获取表格的对象,如var talbe = document.getElementById("tabcontext") ;
--Table.rows.length获取表格总共有多少行.
-- Table.rows[0]指的是表格第一行的对象
-- Table.rows[0].cells[0],指的是表格第一行第一个单元格的对象
-- Table.rows[0].cells[0].colSpan = 4 ;指的是当前单元格跨4列.(注意colSpan中的S大写,否则不起作用,我就因为小写了找了好长时间) ;
 
把代码贴出来分析一下.

var tab = document.getElementById("tabcontext");//拿到当前页面的表格对象 //判断用户点击的是哪一行 var temp = 0 ; for(i = 0 ; i < tab.rows.length ; i ++ ) {          if(tab.rows[i] == curr )          { temp = i ;          } } //处理点击当前的样式 tab.rows[temp].cells[0].className = "paddingt8" ; //为样式赋值 tab.rows[temp].cells[1].className = "paddingt8" ; tab.rows[temp].cells[2].className = "textin12 paddingt8" ; tab.rows[temp].cells[3].className = "textin12 paddingt8" ; tab.rows[temp].cells[4].className = "textin12 paddingt8" ; //要添加的文本 var addcontext = document.getElementById("addcontext"); if(addcontext != null ) {          //表明已经添加过了          addcontext.parentNode.removeChild(addcontext);//节点          return false ; }   //添加新行的方法 var tr = tab.insertRow(temp + 1 );//在点击的当前行的下一行添加内容,添加行的方法, tr.className = "tr_hover" ; tr.id = "addcontext" ; //添加单元格 tr.insertCell(0);//添加单元格 tr.cells[0].className = "table_trboth paddingt8" ; tr.cells[0].align = "center" ; tr.insertCell(1); tr.cells[1].colSpan = 4 ; tr.cells[1].className = "table_trboth paddingt8" ; tr.cells[1].innerHTML = "<p class='frihgt marginr8 margint9'>蒂塔万提斯sfdasf</p>";

 
3,JavaScript使用DOM的一些心得
所有的节点的创建都是document提供的.
如var tedom = document.createElement(“div”);
设置属性
Tedom.setAttribute(“id”,”test”);
但是每一个节点都有一个方法appendChild(dom);
把document创建出来的节点传进去就行了.
删除元素是每个节点提供的方法.
往往分三步走,
1,拿到要删除的节点, var tedom = document.createElement(“div”);
2,删除当前节点,为了安全起见,先拿到父节点,再删除节点.
例子代码:
tedom.parentNode.removeChild(tedom);
以上是本人最近在JavaScript方面遇到的问题,希望能够对大家有一些帮助.呵呵.
 
购物这里来