C
cool2005
I tried to dynamically add/clone a <tr> from an existing <tr> to a
<table> but the problem
is that I need to have a "onclick" event handler in the <tr>.
I have tried following
A. approach 1.
1. find the <tr> that I will insert <tr>s right after it
2. get content (collection of outerHTML of those <tr>s to be
inserted)
3. use insertAdjacentHTML to perform the inserting.
This approach failed with a "runtime error" at step 3. The code is
below
function loadSubRows222(tr_id) {
var doc = top.mainFrame.listFrame.document;
var table = doc.getElementById("tree_table");
//swDebugInfo(table.outerHTML, "1111");
var tb = table.children[0];
var trs = tb.children;
var sel = null;
var isEnd = false;
for (var i=0; i<trs.length; i++) {
if (trs.id==tr_id) {
if (i==trs.length-1) {
isEnd = true;
} else {
sel = trs;
}
break;
}
}
if (sel==null && !isEnd) {
alert("Selected row not found.");
return;
}
var pn = doc.getElementById(tr_id);
pn.loaded = '1';
var doc2 = top.hiddenFrame.document;
var table2 = doc2.getElementById("subListTable");
//swDebugInfo(table2.outerHTML, "hiddenFrame.document");
var tb2 = table2.children[0];
var ttt = tb2.innerHTML;
sel.insertAdjacentHTML("afterEnd", ttt);
}
B. Approach 2.
1. find the <tr> that I will insert <tr>s right after it
2. create a <tr> using createElement("tr"), say newTr
3. assign outerHTM of the new <tr> content to newTr's outerHTML
(I have to use outerHTML instead of innerHTM since I need to
carry the onclick)
This failed too with the "runtime error" when assign outerHTML
C. approach 3
1. find the <tr> that I will insert <tr>s right after it
2. create a <tr> using createElement("tr"), say newTr
3. copy/construct the newTr copyTr (see below)
trying to assign onclick as a field of newTr failed
since the "onclick" was not recongnized as an event
handler.
function copyTr(doc, t1, t2) {
t1.id = t2.id;
t1.loaded = t2.loaded;
t1.level = t2.level;
//get the content of onclick
var oStr = t2.outerHTML;
var i=oStr.indexOf(" onclick=\"");
var j=oStr.indexOf("\"", i+10);
//assignment
t1.onClick = oStr.substring(i+10, j);
var ch = t2.children;
for (var i=0; i<ch.length; i++) {
var newTd = doc.createElement("td");
newTd.innerHTML = ch.innerHTML;
t1.appendChild(newTd);
}
}
My target is IE.
Any suggestion will be very appreciated.
thanks
<table> but the problem
is that I need to have a "onclick" event handler in the <tr>.
I have tried following
A. approach 1.
1. find the <tr> that I will insert <tr>s right after it
2. get content (collection of outerHTML of those <tr>s to be
inserted)
3. use insertAdjacentHTML to perform the inserting.
This approach failed with a "runtime error" at step 3. The code is
below
function loadSubRows222(tr_id) {
var doc = top.mainFrame.listFrame.document;
var table = doc.getElementById("tree_table");
//swDebugInfo(table.outerHTML, "1111");
var tb = table.children[0];
var trs = tb.children;
var sel = null;
var isEnd = false;
for (var i=0; i<trs.length; i++) {
if (trs.id==tr_id) {
if (i==trs.length-1) {
isEnd = true;
} else {
sel = trs;
}
break;
}
}
if (sel==null && !isEnd) {
alert("Selected row not found.");
return;
}
var pn = doc.getElementById(tr_id);
pn.loaded = '1';
var doc2 = top.hiddenFrame.document;
var table2 = doc2.getElementById("subListTable");
//swDebugInfo(table2.outerHTML, "hiddenFrame.document");
var tb2 = table2.children[0];
var ttt = tb2.innerHTML;
sel.insertAdjacentHTML("afterEnd", ttt);
}
B. Approach 2.
1. find the <tr> that I will insert <tr>s right after it
2. create a <tr> using createElement("tr"), say newTr
3. assign outerHTM of the new <tr> content to newTr's outerHTML
(I have to use outerHTML instead of innerHTM since I need to
carry the onclick)
This failed too with the "runtime error" when assign outerHTML
C. approach 3
1. find the <tr> that I will insert <tr>s right after it
2. create a <tr> using createElement("tr"), say newTr
3. copy/construct the newTr copyTr (see below)
trying to assign onclick as a field of newTr failed
since the "onclick" was not recongnized as an event
handler.
function copyTr(doc, t1, t2) {
t1.id = t2.id;
t1.loaded = t2.loaded;
t1.level = t2.level;
//get the content of onclick
var oStr = t2.outerHTML;
var i=oStr.indexOf(" onclick=\"");
var j=oStr.indexOf("\"", i+10);
//assignment
t1.onClick = oStr.substring(i+10, j);
var ch = t2.children;
for (var i=0; i<ch.length; i++) {
var newTd = doc.createElement("td");
newTd.innerHTML = ch.innerHTML;
t1.appendChild(newTd);
}
}
My target is IE.
Any suggestion will be very appreciated.
thanks