Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如上所述，由于某种原因，dateCells元素的colspan不会从1变为2。

Answer 1

因为你要把它添加到tr elem，请注意我已将顶部的一个更改为td并且它会扩展，也是colSpan中的大写S

＆＃13;

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";
          }
      }

＆＃13;

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

＆＃13;

     <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>

＆＃13;

Answer 2

您的脚本中需要.colSpan。注意资本S。另外，您需要在

中使用dateClass作为表格行<tr>

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

请参阅此fiddle。

Answer 3

试试这个，

dateCells[ i ].colSpan = "2";

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

3 个答案: