Solved

Why and how to solve .setAttribute property that cannot set "rowspan" for the column of dynamic created table?

Posted on 2004-10-27
8,154 Views
Last Modified: 2011-10-03
Hi, my code is:

          var newRow = document.getElementById("tblAddSubFields").insertRow();
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + n + "</font>";
          newCell.setAttribute("rowspan", "3");
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + sfnSubfieldsComboBox(vsCodesTablesFieldNames, n, "", "", "") + "</font>";
          newCell.setAttribute("rowspan", "3");
          newCell.setAttribute("align", "center");

It gives no run time error but how to solve it?
0
Question by:limct
    10 Comments
     
    LVL 63

    Expert Comment

    by:Zvonko
    You give no index for the row where the new row has to be inserted, so it is appended to the end of the table.
    How do you expect to see the rowspan at end of the table?
    Appending three rows should also not have any visible effects.

    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    And delete the question http:Q_21185661.html as long as nobody comments into that question.
    Afterwards you have to ask Community Support to close the duplicate question.
    0
     
    LVL 6

    Expert Comment

    by:sathishv
    You are setting the 'rowspan' property to the inserted cell rather than to the inserted row, the last two lines should be:

    newRow.setAttribute("rowspan", "3");    //for the inserted row
    newCell.setAttribute("align", "center");   //for the inserted cell
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    LOL :-)

    What is a row spaning row??? Isn't it then simply a row?



    0
     
    LVL 4

    Accepted Solution

    by:
    It requires a capital S.; colSpan and rowSpan.
    0
     
    LVL 3

    Expert Comment

    by:ragerino
    why don't you create the table via innerHTML

    1. put a div somewhere where the table should be f.e.: <div id="tbldiv"></div>
    2. create the html-code via javascript f.e.: var temp='<table id="bla"><tr><td rowspan=2>1,3</td><td>2</td></tr><tr><td>4</td></tr></table>';
    3. place the innerHTML-code into the div: f.e.: document.getElementById('tbldiv').innerHTML=temp;
    4. after that you can access the table via dhtml. maybe for IE you will need to call another function with a setTimeout('function2("bla")',10); because IE renders sometimes too slow, so the table isn't created immediately and you can't access it instantly via getElementById after setting the innerHTML propery of the div

    hope that helps (and you r able to understand my english :)
    i think this should be a little bit easier.
    0
     
    LVL 6

    Expert Comment

    by:sathishv
    Oooops... sorry! Happens when your cafeteria runs out of coffee!
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    :-)
    0
     
    LVL 3

    Expert Comment

    by:ragerino
    hehe :)
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    By the way. The best idea was from PeterCN:    rowSpan

    Here my test:
    <script>
    function addRow(){
    n = 100;
              var newRow = document.getElementById("tblAddSubFields").insertRow(1);
                  newCell = newRow.insertCell();
                   newCell.innerHTML = "<font face=Verdana size=-1>" + n + "</font>";
              newCell.setAttribute("rowSpan", "3");
                  newCell = newRow.insertCell();
                   newCell.innerHTML = "<font face=Verdana size=-1>" + 'sfnSubfieldsComboBox(vsCodesTablesFieldNames, n, "", "", "")' + "</font>";
              newCell.setAttribute("rowSpan", "3");
              newCell.setAttribute("align", "center");
    }
    </script>
    <table id="tblAddSubFields" border="1">
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
    </table>
    <a href="javascript:addRow()">add</a>

    Strange effects come when you add twice to same row those spans, but that's another story.


    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Learn The Basics of Ethical Hacking & Pen Testing

    Computer and network security is one of the fastest growing and most essential industries in technology, meaning companies will pay big bucks for ethical hackers. This is the perfect course to leap into this lucrative career, learning how to use ethical hacking to reveal ...

    Suggested Solutions

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    856 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now