Je me souviens que j'ai rencontré un tel problème lors d'un entretien : il y a un formulaire, puis il y a 4 zones de saisie et un bouton de fusion. La zone de saisie ressemble à ceci, de quelle ligne à quelle ligne, et de quelle colonne à quelle colonne. , puis cliquez sur le bouton pour fusionner. Quand je suis sorti de l'école, je connaissais peu JS, mais je n'y arrivais pas du tout ! Maintenant que j'y pense, cette question teste en fait si les compétences de base sont solides ! Si vous êtes intéressé, vous pouvez le faire vous-même et tester si vous en êtes capable. Capture d'écran de la question :
Résoudre ce problème semble maintenant simple, mais cela m'a quand même pris beaucoup de temps. Peut-être que ma réflexion est fausse ? L'essentiel est d'utiliser js pour faire fonctionner le HTML. J'ai maintenant implémenté l'ajout de lignes, la suppression de lignes, l'ajout de colonnes et la suppression de colonnes. Cependant, la fusion de cellules ne peut pas être entièrement réalisée, principalement parce que le tableau sera gâché. Maintenant, postez cette question, les collègues intéressés pourront l'étudier quand ils auront le temps et voir s'ils peuvent y arriver ! Le problème est principalement la fusion des cellules ! Vous pouvez également m'aider à résoudre le problème de la fusion de cellules.
Une partie du code que j'ai moi-même implémenté :
La partie HTML écrit
Copiez le code comme suit :
<body onLoad="init();">
<table id="table" align="center">
<tbody id="newbody"></tbody>
</table>
<div>
<table align="centre">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="Ajouter une ligne"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="Supprimer la ligne"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="Supprimer la colonne"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="Ajouter une colonne"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="Ajouter une ligne"/>>< /td></tr>
</table>
</div>
<div>
<table align="centre">
<tr><td>De la ligne <input type="text" id="beginRow" name="beginRow" value=""/> à la valeur <input type="text" name="endRow" id="endRow" ""/> ligne</td><td rowspan="2" id="test"><input type="bouton" nom="hebing" id="hebing" value="Fusionner" onClick="rebulid();"/> </td></tr>
<tr><td>De la colonne <input type="text" name="beginCol" id="beginCol" value=""/> à la valeur <input type="text" name="endCol" id="endCol" ""/> Colonne</td></tr>
</table>
</div>
</corps>
Générer une table en utilisant appendChild a écrit
Copiez le code comme suit :
fonction init(){
_table=document.getElementById ("table");
_table.border="1px";
_table.width="800px";
pour(var i=1;i<10;i++){
var row=document.createElement ("tr");
rangée.id=i;
pour(var j=1;j<6;j++){
var cell=document.createElement ("td");
cellule.id =i+"/"+j;
cell.appendChild(document.createTextNode ("th"+cell.id+"column"));
row.appendChild (cellule);
}
document.getElementById("newbody").appendChild (ligne);
}
}
Pour ajouter la ligne, écrivez en utilisant la méthode appendChild
Copiez le code comme suit :
fonction addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=longueur+1;
var td=document.createElement("td");
pour(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("th"+td.id+"column"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild (tr);
}
Une autre façon d'ajouter des lignes que insertRow a écrites
Copiez le code comme suit :
fonction addRow_withInsert(){
varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
var rowCount =document.getElementById("table").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
pour(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="nouveau"+(rowCount)+"/"+(i+1)+"colonne";
cell.id=(rowCount)+"/"+(i+1);
}
}
Pour supprimer une ligne, utilisez deleteRow(row Index) a écrit
Copiez le code comme suit :
/*Supprimer des lignes à l'aide de deleteRow(row Index)*/
fonction supprimerRow(){
/* var row=document.getElementById("2");
var index=row.rowIndex;
alerte(index);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
Pour ajouter une colonne, utilisez la méthode insertCell (position de la colonne) pour écrire
Copiez le code comme suit :
fonction addCell(){
/*document.getElementById("table").rows.item(0).cells.length
Utilisé pour obtenir le nombre de colonnes dans le tableau
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="Colonne "+(i+1)+"/"+3+";
}
}
Pour supprimer une colonne, utilisez la méthode deleteCell (position de la colonne) pour écrire
Copiez le code comme suit :
/*Supprimer une colonne en utilisant la méthode deleteCell(column position)*/
fonction supprimerCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
Fusionner les cellules (non implémenté) a écrit
Il y a un problème avec mon code, principalement parce que la table sera foirée, et elle n'a pas été corrigée :
Copiez le code comme suit :
fonction rebulid(){
varbeginRow=document.getElementById("beginRow").value;/*Début de la ligne*/
var endRow=document.getElementById("endRow").value;/*Fin de ligne*/
varbeginCol=document.getElementById("beginCol").value;/*begin column*/
var endCol=document.getElementById("endCol").value;/*Fin de colonne*/
var tempCol=beginRow+"/"+beginCol;/*Localisez la colonne dont vous souhaitez modifier les attributs*/
alerte(tempCol);
var td=document.getElementById(tempCol);
/*Supprimer les cellules à fusionner*/
pour(var x=beginRow;x<=endRow;x++){
pour(var i=beginCol;i<=endCol;i++){
si(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
autre{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}