Wrox Home  
Search P2P Archive for: Go

  Return to Index  

html_code_clinic thread: using DHTML in ie 4


Message #1 by Paulo Roberto Lobo <prlobo@i...> on Wed, 23 May 2001 00:13:04 -0300
hi imar!...

great!.. thank you very much for the explanation...

[[ ]]'S paulo



At 12:14 24/05/01 +0200, you wrote:
>Interesting approach by inserting new content with the innerHTML method. 
>Indeed beforehand you can create whatever attributes you wish.
>
>The parentElement has to do with an implicitly created TBODY element, that 
>is wrapped around all the table rows. (This won't happen when you 
>explicitly state TFOOT, THEAD or TBODY). The TFOOT, THEAD or TBODY 
>elements are used to logically group table contents together.
>
>Here's some code to show what I mean.
>
>Consider the following basic table.
>
><table id="tstTable">
><tr id="tstRow">
>         <td id="tstCell">
>                 Cell content
>         </td>
></tr>
></table>
>
>
>Now here is what happens with various parentElement tests....
>
>// returns "tstCell"
>document.all.tstCell.id
>
>// returns "tstRow"
>document.all.tstCell.parentElement.id
>
>// returns nothing (but actually this is the implicit ID of the TBODY)
>document.all.tstCell.parentElement.parentElement.id
>
>// returns "tstTable"
>document.all.tstCell.parentElement.parentElement.parentElement.id
>
>
>Now when you do the same stuff with innerHTML, you can see why this 
>behavior occurs:
>
>// returns  "Cell content", the cell content
>document.all.tstCell.innerHTML
>
>// returns  "<td id="tstCell">Cell content</td>" , the row content
>document.all.tstCell.parentElement.innerHTML
>
>// returns "<tr id="tstRow"><td id="tstCell">Cell content</td></tr>"
>document.all.tstCell.parentElement.parentElement.innerHTML
>
>// Now here is where it gets interesting:
>What happens when we add yet another parentElement? You would expect that 
>we were at the "top" level, inside the body, so the whole body would be 
>returned.
>Interestingly, this isn't the case. The TBODY with all it's contents is 
>returned, like this:
>
>"<TBODY><tr id="tstRow"><td id="tstCell">Cell content</td></tr></TBODY>" 
>gets returned with this code:
>document.all.tstCell.parentElement.parentElement.parentElement.innerHTML
>
>This example shows that IE implicitly creates a TBODY around all the rows 
>in a table when it doesn't encounter an explicit TFOOT, THEAD or TBODY.
>
>
>// So we need yet another parentElement to get the whole body contents:
>document.all.tstCell.parentElement.parentElement.parentElement.parentElement.innerHTML
>
>
>Now, let's return to the initial table and add an explicit TBODY:
>
><table id="tstTable">
><tbody id="tstBody">
>         <tr id="tstRow">
>                 <td id="tstCell">
>                         Cell content
>                 </td>
>         </tr>
></tbody>
></table>
>
>and let's try our initial parentElement.id tests again:
>
>
>// still returns "tstCell"
>document.all.tstCell.id
>
>// still returns "tstRow"
>document.all.tstCell.parentElement.id
>
>// now this returns tstBody, the ID of the explicit TBODY element
>document.all.tstCell.parentElement.parentElement.id
>
>// still returns "tstTable"
>document.all.tstCell.parentElement.parentElement.parentElement.id
>
>
>Apparently, what you get is not always what you see ;-)
>
>
>Sorry for the long post but I hope this clarifies things a bit.
>
>
>Regards,
>
>
>Imar
>
>
>
>At 12:33 AM 5/24/2001 -0300, you wrote:
>>Helo Imar,
>>
>>thank you very much for the answer....
>>i think your solution with the array of references is very interesting,
>>but in my case i could adopt another one...
>>
>>like you could notice i was tryng to clone a row of  a table and later
>>accessing it programatically (through the id) to change some properties
>>and attributes... so i decided to encapsulate the row in another table inside
>>the original table... that way i can use the cell' s property innerHTML 
>>to add
>>the entire row with all parameters already set (including the id) to the 
>>recently
>>created row in the original table...
>>
>>it seems something like that.
>>
>>THE CODE BEFORE:
>>
>><table id="originalTable">
>>     <tr id="originalRow">
>>          <!--that is the line i was tryng to clone-->
>>          <td id="originalCell1" > </td>
>>          <td id="originalCell2" > </td>
>>      </tr>
>></table>
>>
>>this way to clone the line i need
>>1) insert a new line
>>2) insert all the cells of the cloned line
>>3) set the respectives id(s), but this does no work cause the id is 
>>reead-only
>>
>>
>>THE CODE NOW::
>>
>><table id="originalTable">
>>    <tr>
>>       <td>
>>          <table>
>>             <tr id="originalRow">
>>                 <!--the line i want to clone is now encapsulated in 
>> another level-->
>>                <td id="originalCell1" > </td>
>>                <td id="originalCell2" > </td>
>>             <tr>
>>       <t/d>
>>    </tr>
>></table>
>>
>>this way to clone the line i need
>>1) insert a new line
>>2) insert a cell
>>3) copy the innerHTML of the original cell in the original row to the 
>>newly created cell
>>     in the newly created row, all the id(s) are set in the html.
>>4) to access the rows i'm using the property rows of the original table:
>>     originalTable.rows(index_of_wanted_row).originalRow
>>
>>------------------
>>
>>in concern with the parentElement question i still don't have any idea.
>>is there somebody more who could help us to know the truth that is out 
>>there?.. :)
>>
>>------------------
>>
>>  [[ ]]'S paulo
>>
>>
>>
>>
>>At 18:41 23/05/01 +0200, you wrote:
>>>Hi there,
>>>
>>>AFAIK, cloneNode was introduced in IE 5, so it's not available in 4. 
>>>IMO, you should just create a new row and then copy the data you need to it.
>>>
>>>Here is something that should work in IE 5 that creates a new row to the 
>>>table:
>>>
>>><script language="JavaScript">
>>>function doIt()
>>>{
>>>         myNewRow = document.all.tblTest.insertRow();
>>>         myNewRow.id="uniqueID";
>>>         alert (myNewRow.id); // will return "uniqueID"
>>>}
>>></script>
>>>
>>><table id="tblTest" border="1">
>>><tr>
>>>         <td>
>>>                 Hello
>>>         </td>
>>></tr>
>>></table>
>>>
>>><form name="frmTest">
>>>         <input type="button" value="Click me" onClick="doIt();">
>>></form>
>>>
>>>This code will add a new row to the table "tblTest" when the button is 
>>>clicked.
>>>
>>>The ID property is indeed read-only up to version 4 of IE, so you'll 
>>>need to store the reference somewhere if you want to refer to it later. 
>>>My suggestion is to create an array or a single variable and store the 
>>>reference(s) in that variable (I did that in the example with myNewRow) 
>>>. This might become a problem when dealing with lots of new rows, but in 
>>>most cases you might be able to deal with it correctly.
>>>
>>>I am not a 100% sure, but I think the parentElement issue has to do with 
>>>the fact that the parentElement does not apply to an object like a row, 
>>>but to a TextRange. So, (wild guessing here) the rowElement is the 
>>>contents, the first parentElement is the Row itself and the second 
>>>parentElement refers to the container object. Again, just wild guessing 
>>>here.....
>>>
>>>
>>>Hope this helps,
>>>
>>>Imar
>>>
>>>
>>>At 12:13 AM 5/23/2001 -0300, you wrote:
>>>>hy guys,
>>>>
>>>>I need some help in using DHTML in internet explorer 4...
>>>>
>>>>I'm tryng to clone a row of a table with the method cloneNode, but
>>>>it does not work... does anybody know why this happens?... would be
>>>>because the method is not implemented in ie 4?... is there another way
>>>>to make this?...
>>>>
>>>>i tried to use the method insertRow of the Table Object Model, but 
>>>>enters another
>>>>problem: i can not write to the property ID of the row recently 
>>>>created, so i can't access it...
>>>>is there another way to access elements in ie 4?
>>>>
>>>>and here is the last question... why it is needed to reference the 
>>>>rows' parentElement twice to
>>>>get a reference to table element wich contains it?...
>>>>example: tblElement = rowElement.parentElement.parentElement...
>>>>
>>>>
>>>>thanks in advance!
>>>>[[ ]]'S



  Return to Index