HTMLTableCellElement: colSpan ããããã£

Baseline åºãå©ç¨å¯è½

colSpan ã¯ HTMLTableCellElement ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ããããã£ã§ããã®ã»ã«ãã¾ãããåã®æ°ãè¡¨ãã¾ããããã«ãããã»ã«ã¯è¡¨ã®è¤æ°ã®åã«ã¾ããã£ã¦ç©ºéãå ãããã¨ãã§ããããã«ãªãã¾ããããã¯ colspan å±æ§ã«å¯¾å¿ãã¦ãã¾ãã

<table>
  <thead>
    <tr>
      <th>å 1</th>
      <th>å 2</th>
      <th>å 3</th>
      <th>å 4</th>
      <th>å 5</th>
      <th>å 6</th>
      <th>å 7</th>
      <th>å 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>
<button id="increase">colspan ãå¢ãã</button>
<button id="decrease">colspan ãæ¸ãã</button>
<div>æåã®ã»ã«ã¯ <output>2</output> åã«ã¾ãããã¾ãã</div>

table {
  border-collapse: collapse;
}

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

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

JavaScript

// è¦ç´ ã«é¢é£ããã¤ã³ã¿ã¼ãã§ã¤ã¹ãåå¾ãã
const cell = document.querySelectorAll("tbody tr td")[0];
const output = document.querySelectorAll("output")[0];

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

increaseButton.addEventListener("click", () => {
  cell.colSpan += 1;

  // è¡¨ç¤ºãæ´æ°
  output.textContent = cell.colSpan;
});

decreaseButton.addEventListener("click", () => {
  cell.colSpan -= 1;

  // è¡¨ç¤ºãæ´æ°
  output.textContent = cell.colSpan;
});