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); } }
该界面了,不错不错啊
看了一下你的css,然后IE打开看看就不那么漂亮了。该死的IE不支持圆角css
中国崛起策很久没有看到了