为什么我不能使用 .colspan 设置此元素的 colspan？

Question

根据我在 JavaScript 中的理解，任何属性都可以用 element.attribute = newValue 设置。所以我试图用 element.colspan = 2 设置多个 table 单元格的 colspan 但它不起作用。任何建议表示赞赏。我的代码如下。

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>

正如您在上面看到的，出于某种原因，dateCells 元素的 colspan 没有从 1 变为 2。

Answer 1

您的脚本中需要 .colSpan。注意大写 S。此外，您需要在

中使用 table 行 <tr> 而不是 dateClass

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

看到这个fiddle。

Answer 2

试试这个，

dateCells[ i ].colSpan = "2";

Answer 3

因为您将它添加到 tr 元素，请注意我只将最上面的一个更改为 td 并且它扩展了，还有 colSpan 中的大写字母 S

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>

为什么我不能使用 .colspan 设置此元素的 colspan？

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

html

javascript

html-table