Comment créer une structure de tableau personnalisée avec Javascript ?

Création d'une structure de tableau spécifique à l'aide de JavaScript

Votre demande implique la création d'un tableau avec une structure unique, différente de celle que vous avez fournie dans votre code. Pour y parvenir, explorons une version modifiée de votre fonction JavaScript :

<code class="javascript">function createTable() {
  // Get the body element for table insertion
  var body = document.querySelector("body");

  // Create the table and table body elements
  var table = document.createElement("table");
  table.style.width = "100%";
  table.style.border = "1px solid black";
  var tableBody = document.createElement("tbody");

  // Set up the table rows and columns
  for (var i = 0; i < 3; i++) {
    var row = tableBody.insertRow();
    for (var j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        // Skip cell for the bottom right corner
        continue;
      } else {
        var cell = row.insertCell();
        cell.appendChild(document.createTextNode(`Cell at row ${i}, column ${j}`));
        cell.style.border = "1px solid black";
        if (i === 1 && j === 1) {
          // Set a rowspan of 2 for the specific cell
          cell.setAttribute("rowspan", "2");
        }
      }
    }
  }

  // Append the table body to the table
  table.appendChild(tableBody);

  // Append the table to the body of the page
  body.appendChild(table);
}

createTable();</code>

Dans ce code modifié, nous utilisons les méthodes insertRow() et insertCell() pour créer directement les lignes et les cellules du tableau. Les principales différences et optimisations incluent :

• Utilisation du style CSS pour définir la largeur et la bordure du tableau au lieu de l'attribut border sur l'élément tableau.
• Création d'une étendue de lignes de 2 pour la cellule dans la deuxième ligne et la deuxième colonne.
• Ignorer la création de cellules pour le coin inférieur droit où aucune cellule n'est nécessaire.
• Utiliser une convention de dénomination cohérente pour les variables (camelCase) pour plus de clarté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!