Ich erinnere mich, dass ich während eines Interviews auf ein solches Problem gestoßen bin: Es gibt ein Formular, und dann gibt es 4 Eingabefelder und eine Schaltfläche zum Zusammenführen. Das Eingabefeld sieht so aus, von welcher Zeile zu welcher Zeile und von welcher Spalte zu welcher Spalte . und klicken Sie dann auf die Schaltfläche zum Zusammenführen. Als ich aus der Schule kam, wusste ich nur wenig über JS, aber ich konnte es überhaupt nicht! Wenn ich jetzt darüber nachdenke, testet diese Frage tatsächlich, ob die Grundkenntnisse solide sind! Wenn Sie Interesse haben, können Sie es selbst tun und testen, ob Sie es können. Screenshot der Frage:
Die Lösung dieses Problems scheint jetzt einfach zu sein, aber es hat trotzdem lange gedauert. Vielleicht ist meine Denkweise falsch? Die Hauptsache ist, js zum Betreiben von HTML zu verwenden. Ich habe jetzt das Hinzufügen von Zeilen, das Löschen von Zeilen, das Hinzufügen von Spalten und das Löschen von Spalten implementiert. Das Zusammenführen von Zellen kann jedoch nicht vollständig realisiert werden, hauptsächlich weil die Tabelle durcheinander gebracht wird. Stellen Sie jetzt diese Frage. Interessierte Kollegen können sie studieren, wenn sie Zeit haben, und sehen, ob sie es schaffen! Das Problem besteht hauptsächlich darin, Zellen zusammenzuführen! Sie können mir auch helfen, das Problem der Zellverschmelzung herauszufinden.
Ein Teil des Codes, den ich selbst implementiert habe:
Der HTML-Teil schreibt
Kopieren Sie den Codecode wie folgt:
<body onLoad="init();">
<table id="table" align="center">
<tbody id="newbody"></tbody>
</table>
<div>
<table align="center">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="Zeile hinzufügen"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="Remove row"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="Spalte entfernen"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick="addCell();" value="Spalte hinzufügen"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="Zeile hinzufügen"/>< /td></tr>
</table>
</div>
<div>
<table align="center">
<tr><td>Von der Zeile <input type="text" id="beginRow" name="beginRow" value=""/> bis zum Wert <input type="text" name="endRow" id="endRow". =""/> row</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="Merge" onClick="rebulid();"/> </td></tr>
<tr><td>Von Spalte <input type="text" name="beginCol" id="beginCol" value=""/> bis <input type="text" name="endCol" id="endCol" value =""/> Spalte</td></tr>
</table>
</div>
</body>
Generieren Sie eine Tabelle mithilfe von appendChild
Kopieren Sie den Codecode wie folgt:
Funktion init(){
_table=document.getElementById ("Tabelle");
_table.border="1px";
_table.width="800px";
for(var i=1;i<10;i++){
var row=document.createElement ("tr");
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement ("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode ("th"+cell.id+"column"));
row.appendChild (Zelle);
}
document.getElementById("newbody").appendChild (row);
}
}
Um die Zeile hinzuzufügen, schreiben Sie mit der appendChild-Methode
Kopieren Sie den Codecode wie folgt:
Funktion 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=length+1;
var td=document.createElement("td");
for(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);
}
Eine andere Möglichkeit, Zeilen hinzuzufügen, hat insertRow geschrieben
Kopieren Sie den Codecode wie folgt:
Funktion 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;
for(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="new"+(rowCount)+"/"+(i+1)+"column";
cell.id=(rowCount)+"/"+(i+1);
}
}
Um eine Zeile zu löschen, verwenden Sie deleteRow(row Index) write
Kopieren Sie den Codecode wie folgt:
/*Zeilen löschen mit deleteRow(row Index)*/
Funktion removeRow(){
/* var row=document.getElementById("2");
var index=row.rowIndex;
alarm(index);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
Um eine Spalte hinzuzufügen, verwenden Sie zum Schreiben die Methode insertCell (Spaltenposition).
Kopieren Sie den Codecode wie folgt:
Funktion addCell(){
/*document.getElementById("table").rows.item(0).cells.length
Wird verwendet, um die Anzahl der Spalten in der Tabelle zu ermitteln
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="Spalte "+(i+1)+"/"+3+";
}
}
Um eine Spalte zu löschen, verwenden Sie zum Schreiben die Methode deleteCell (Spaltenposition).
Kopieren Sie den Codecode wie folgt:
/*Eine Spalte mit der Methode „deleteCell(column position)“ löschen*/
Funktion removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
Zellen zusammenführen (nicht implementiert) geschrieben
Es gibt ein Problem mit meinem Code, hauptsächlich weil die Tabelle durcheinander ist und nicht korrigiert wurde:
Kopieren Sie den Codecode wie folgt:
Funktion rebulid(){
var beginRow=document.getElementById("beginRow").value;/*Start row*/
var endRow=document.getElementById("endRow").value;/*End row*/
var beginCol=document.getElementById("beginCol").value;/*begin Column*/
var endCol=document.getElementById("endCol").value;/*Ende der Spalte*/
var tempCol=beginRow+"/"+beginCol;/*Suchen Sie die Spalte, deren Attribute Sie ändern möchten*/
alarm(tempCol);
var td=document.getElementById(tempCol);
/*Löschen Sie die zusammenzuführenden Zellen*/
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
anders{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}