HTMLTableColElementï¼span å±æ§

åºçº¿ å¹¿æ³å¯ç¨

HTMLTableColElement æ¥å£ç span åªè¯»å±æ§è¡¨ç¤º <col> æ <colgroup> å¿é¡»æ¨ªè·¨çåæ°ï¼è¿ä½¿å¾è¯¥åå æ®è¡¨ä¸å¤åçç©ºé´ãå®åæ span å±æ§ã

å¼

ä¸ä¸ªè¡¨ç¤ºåæ°çæ£æ°ã

ç¤ºä¾

HTML

html

<table>
  <colgroup>
    <col />
    <col span="2" class="multiColumn" />
  </colgroup>
  <thead>
    <th></th>
    <th scope="col">C1</th>
    <th scope="col">C2</th>
    <th scope="col">C3</th>
    <th scope="col">C4</th>
  </thead>
  <tbody>
    <tr>
      <th scope="row">è¡ 1</th>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<button id="increase">å¢å åè·¨åº¦</button>
<button id="decrease">åå°åè·¨åº¦</button>
<div>ç¬¬ä¸ä¸ª &lt;col&gt; æ¨ªè·¨ <output>2</output> ä¸ªå®éåã</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

CSS

css

.multiColumn {
  background-color: #d7d9f2;
}

JavaScript

// è·åç¸å³æ¥å£åç´ 
const col = document.querySelectorAll("col")[1];
const output = document.querySelectorAll("output")[0];

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
  col.span = col.span + 1;

  // æ´æ°æ¾ç¤º
  output.textContent = col.span;
});

decreaseButton.addEventListener("click", () => {
  col.span = col.span - 1;

  // æ´æ°æ¾ç¤º
  output.textContent = col.span;
});