CODEWITHSUNDEEP
javascripthtmlhtml-table
user4330208
user4330208

Reputation:

Why can't I set the colspan of this element using .colspan?

From What I understand in JavaScript any attribute can be set with element.attribute = newValue. So I'm trying to set the colspan of multiple table cells with element.colspan = 2 yet it doesn't work. Any suggestions are appreciated. My code is below.

table td, table th{ border: 2px solid #0f0f0f; text-align:center; }

.noDisplay{ display:none; }
<html>
  <body>
     <table>
        <tbody>
          <tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>

          <tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
        </tbody>
     </table>
    <br>
    <div onclick = "clicked()">CLICK<br>HERE</div>

    <script>
      function clicked(){
          var cells = document.getElementsByClassName( 'cells' );

          for( var i = 0; i < cells.length; i++ ){
            cells[ i ].classList.remove( 'noDisplay' );
          }

          var dateCells = document.getElementsByClassName( 'dateCells' );

          for( var i = 0; i < dateCells.length; i++ ){
            dateCells[ i ].colspan = 2;
          }
      }
    </script>
  </body>
</html>

As you can see above, for some reason the colspan of the dateCells elements aren't changing from 1 to 2.

Upvotes: 0

Views: 532

Answers (3)

Billy
Billy

Reputation: 2448

because you were adding it to the tr elem, notice I've changed the top one only to the td and it expands, also the capital S in colSpan

function clicked(){
  
          var cells = document.getElementsByClassName( 'cells' );

          for( var i = 0; i < cells.length; i++ ){
            cells[ i ].classList.remove( 'noDisplay' );
          }

          var dateCells = document.getElementsByClassName( 'dateCells' );

          for( var r = 0; r < dateCells.length; r++ ){
            dateCells[ r ].colSpan = "2";
          }
      }
table td, table th{ border: 2px solid #0f0f0f; text-align:center; }

.noDisplay{ display:none; }
     <table>
        <tbody>
          <tr  ><td colspan = "1"class = "dateCells">DATE</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>

          <tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
          <tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
        </tbody>
     </table>
    <br>
    <div onclick = "clicked()">CLICK<br>HERE</div>

Upvotes: 2

alacy
alacy

Reputation: 5074

You need .colSpan in your script. Notice the capital S. Also, instead of having your dateClass for your table row <tr> you need it in 

<td class="dateCells" colspan = "1">Date</td>

See this fiddle.

Upvotes: 1

Lumi Lu
Lumi Lu

Reputation: 3305

Try this,

dateCells[ i ].colSpan = "2";

Upvotes: 1

Related Questions