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方面遇到的问题,希望能够对大家有一些帮助.呵呵.