Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with text nodes and attributes

    I want to create nodes using appendchild and modify their properties (like color or size of text) but don't know how.
    My code is:
    var c_table_t = document.getElementById('table_tandem')
    var c_tbody_t= document.createElement('tbody')
    var c_p= document.createElement('p')
    var c_font= document.createElement('font')
    var c_tr_t=document.createElement('tr')
    var c_td_ta=document.createElement('td')
    var c_td_te=document.createElement('td')
    var c_td_da=document.createElement('td')
    var c_td_va=document.createElement('td')
    var c_td_de=document.createElement('td')
    var c_text =document.createTextNode(".....................")
    var c_date =document.createTextNode(date_msg[n])
    var c_tandem = document.createTextNode(users[n])
    var c_button_va = document.createElement('button')
    var c_button_de = document.createElement('button')
    c_td_ta.appendChild(c_tandem)
    c_td_te.appendChild(c_text)
    c_td_da.appendChild(c_date)
    c_td_va.appendChild(c_button_va)
    c_td_de.appendChild(c_button_de)
    c_tr_t.appendChild(c_td_ta)
    c_tr_t.appendChild(c_td_te)
    c_tr_t.appendChild(c_td_da)
    c_tr_t.appendChild(c_td_va)
    c_tr_t.appendChild(c_td_de)
    c_font.appendChild(c_tr_t)
    c_p.appendChild(c_font)
    c_tbody_t.appendChild(c_font)
    c_table_t.appendChild(c_tbody_t)
    c_button_va.value="View/Answer"
    c_button_de.value="Delete"
    c_button_va.onclick=new Function("view_ans_ms("+n+")")
    c_button_de.onclick=new Function("del_msg("+n+")")

    I have tried setAttributes but doesn't work. I've tried to assign an id and the access to the properties using: document.getElementById, but still doesn't work.
    And another thing, why when using a text node the white spaces are interpreted as "enter"?

    Thanks!!!!!!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    1. to set HTML attributes:

    object.setAttribute('attribute','value')
    ex:
    object.setAttribute('name','myname')
    object.setAttribute('colSpan','3')

    note that the compounded attributes should be written with uppercases
    colSpan, rowSpan, bgColor

    2. to set CSS attributes
    object.className='myclass'
    or
    object.style.cssattribute='cssvalue'
    ex:
    object.style.backgroundColor ='#CCCCFF';

    note that in javascript the compunded CSS attributes loose their hyphen and use uppercase

    background-color becomes backgroundColor

    3. To attach an event you may use an anonymous

    object.onsomeevent = function(){....}
    ex:
    object.onclick = function(){alert('Hello!')}
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You had some good code, just that you can not put
    <table><tbody><p><font><tr>
    here's some updated code to help:
    Code:
    <html>
    <head>
      <script>
      
        function appendRow(table, index) {
          var d = document;
          if (table = d.getElementById(table)) {
            var tbody = table.tBodies[0];
            if (!tbody) {
              tbody = table.appendChild(d.createElement("tbody"));
            }
            var row = tbody.appendChild(d.createElement("tr"));
              // store value for event reference
              row.nIndex = index = (index || 0);
            
            var cells = [
              d.createElement("td"),
              d.createElement("td"),
              d.createElement("td"),
              d.createElement("td"),
              d.createElement("td")
            ];
            
            var buttonView = d.createElement("button");
            var buttonDelete = d.createElement("button");
            
            cells[0].appendChild(d.createTextNode("User: "+ index )); // use your users array instead
            cells[1].appendChild(d.createTextNode("....................."));
            cells[2].appendChild(d.createTextNode("Date: "+ index )); // user your date_msg array instead
            cells[3].appendChild(buttonView);
            cells[4].appendChild(buttonDelete);
            for (var i = 0; i < cells.length; i++) {
              row.appendChild(cells[i]);
            }
            
            buttonView.value = "View/Answer";
            buttonView.onclick = function(e) {
              view_ans_ms(this.parentNode.parentNode.nIndex);
            }
            
            buttonDelete.value = "Delete";
            buttonDelete.onclick = function(e) {
              del_msg(this.parentNode.parentNode.nIndex);
            }
            return row;
          }
        }
        
        onload = function() {
          for (var i = 1; i <= 100; i++)
            appendRow("table_tandem", i);
        }
      
      </script>
    </head>
    <body>
      <table id="table_tandem"></table>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.
    Then for example, that should work?:

    var table=getElementById('table_name')
    var c_text=document.createElement('div')

    table_name.appendChild(c_text)
    c_text.innerHTML('Hello world')
    c_text.setAttribute('backgroundColor','#CCCCFF')

    Could you please correct where are my mistakes?And what can I do to avoid the text not to be written in two lines?

    Thanks a lot!!

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You can append non-table elements only to a cell element, not to a table or a row.

    TBODY is javascript required. That means that you must take it in consideration even it is not HTML written in case you use parentNode or childNodes[] reference.

    Use DOM methods, not innerHTML

    backgroundColor is not a HTML attribute, is a CSS-on-the-fly attribute, thus it is an atribute of the style.

    Don't mixt objects with their names, and ids with names.
    Last edited by Kor; 02-22-2006 at 04:59 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    var myFirstCell=getElementById('table_id').getElementsByTagName('td')[0]
    var c_text=document.createElement('div')
    c_text.appendChild(document.createTextNode('Hello world!'))
    c_text.style.backgroundColor='#CCCCFF';
    myFirstCell.appendChild(c_text)
    Last edited by Kor; 02-22-2006 at 06:01 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I am gonna try all this!
    BTW, hope Roumania will join EU !!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •