innerHTML只读问题 & 两个动态修改Table的js函数

最近做社会实践项目遇到的一个问题,需要动态修改一个表格。本来以为要想修改一行,直接设置新的 tr.innerHTML即可。后来发现在Firefox下可行,但在IE下通不过,查看了一下帮助,才发现innerHTML还没有一个通用标准,而在IE下innerHTML对于标签为COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR的元素是只读的。要想在IE下动态修改表格,只能使用insertRow和insertCell;

下面这个函数往表格i里添加一行,此行的HTML代码为t。

// insert a row with HTML code t to table i; 
// t: the full HTML code of the row
// i : the table element
// Return the row added
function addRow(t, i) {
	if (typeof(i) == "string")	i = document.getElementById(i);

	var f = t.indexOf('>'), l = t.lastIndexOf('</'),
		tag = t.substr(l+2, t.length-l-3), e;

	if (tag == 'tr') e = i.insertRow(-1);
	else {
		e = document.createElement(tag);
		i.appendChild(e, i);
		e.innerHTML = t.substr(f+1, l-f-1);
	}

	s = t.substr(1, f-1).split(' ');
	for (i=0; i<s.length; i++) {
		ss = s[i].split('=');
		if (ss.length==1) continue;
		e.setAttribute(ss[0], strip(ss[1]));
	}

	ti = t.substr(f+1, l-f-1);
	if (t.substr(l+2, t.length-l-3) == 'tr') {
		var tf;
		while( (tf = ti.indexOf("<td>")) != -1) {
			ti = ti.substr(tf+4, ti.length-tf-4);
			var te = e.insertCell(-1);
			tl = ti.indexOf("</td>");
			te.innerHTML = ti.substr(0, tl);
			ti = ti.substr(tl, ti.length-tl);
		}
	} 

	return e;

	function strip(ss) {
		if (ss[0]=='\''|| ss[0] == "\"")
			return ss.substr(1, ss.length-2);
	}
}

下面这个函数将表格的i行改写为代码t:

// modify row i with row of HTML code t
// t: HTML code 
// i: the row element, get by table.rows[row_index]
// return the row modified
function modifyRow(t, i) {
	var f = t.indexOf('>'), l = t.lastIndexOf('</'),
		tag = t.substr(l+2, t.length-l-3), e;

	if (tag == 'tr') e = i;
	else {
		e = document.createElement(tag);
		i.appendChild(e, i);
		e.innerHTML = t.substr(f+1, l-f-1);
	}

	s = t.substr(1, f-1).split(' ');
	for (i=0; i<s.length; i++) {
		ss = s[i].split('=');
		if (ss.length==1) continue;
		e.setAttribute(ss[0], strip(ss[1]));
	}

	var ti = t.substr(f+1, l-f-1), ri = 0;
	if (t.substr(l+2, t.length-l-3) == 'tr') {
		var tf;
		while ( (tf = ti.indexOf("<td>")) != -1 ) {
			ti = ti.substr(tf+4, ti.length-tf-4);
			var te;
			if (e.cells.length <= ri)	te = e.insertCell(-1);
			else te = e.cells[ri];
			ri++;
			tl = ti.indexOf("</td>");
			te.innerHTML = ti.substr(0, tl);
			ti = ti.substr(tl, ti.length-tl);
		}
	} 

	return e;

	function strip(ss) {
		if (ss[0]=='\''|| ss[0] == "\"")
			return ss.substr(1, ss.length-2);
	}
}

查看更多关于, , , 的内容。

你可能感兴趣的
相关文章

3条留言 -> 跳到留言表格

  • At 2007.07.25 13:36, cosbeta said:

    该界面了,不错不错啊

    • At 2007.07.25 13:48, cosbeta said:

      看了一下你的css,然后IE打开看看就不那么漂亮了。该死的IE不支持圆角css

    • At 2007.07.25 15:44, eden said:

      中国崛起策很久没有看到了

      (Required)
      (Required, not published)

        B | I | U | D | 添加链接 | 插入引用 | 插入代码 | 插入表情 | | + | ?
      guest | 注册 | BBS | 管理 | English | 繁體 | https

      阅微堂

      It’s so nice to have you back where you belong

      Loading...
      Loading...
      Loading...