Recuerdo que encontré un problema de este tipo durante una entrevista: hay un formulario, y luego hay 4 cuadros de entrada y un botón de combinación. El cuadro de entrada se ve así, de qué fila a qué fila y de qué columna a qué columna. y luego haga clic en el botón para fusionar. Cuando salí de la escuela, solo sabía un poco sobre JS, ¡pero no podía hacerlo en absoluto! Ahora que lo pienso, ¡esta pregunta realmente prueba si las habilidades básicas son sólidas! Si está interesado, puede hacerlo usted mismo y probar si puede hacerlo. Captura de pantalla de la pregunta:
Resolver este problema ahora parece sencillo, pero aun así me llevó mucho tiempo. ¿Quizás mi forma de pensar está equivocada? Lo principal es usar js para operar html. Ahora he implementado agregar filas, eliminar filas, agregar columnas y eliminar columnas. Sin embargo, la combinación de celdas no se puede realizar por completo, principalmente porque la tabla estará desordenada. Ahora publique esta pregunta, los colegas interesados pueden estudiarla cuando tengan tiempo y ver si pueden resolverla. ¡Principalmente el problema es fusionar celdas! También puedes ayudarme a resolver el problema de fusionar celdas.
Parte del código que implementé yo mismo:
La parte html escribe
Copie el código de código de la siguiente manera:
<cuerpo onLoad="init();">
<table id="tabla" align="centro">
<tbody id="nuevocuerpo"></tbody>
</tabla>
<div>
<tabla align="centro">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="Agregar fila"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="Eliminar fila"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="Eliminar columna"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" valor="Agregar columna"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" valor="Agregar fila"/> /td></tr>
</tabla>
</div>
<div>
<tabla align="centro">
<tr><td>De la línea <input type="text" id="beginRow" name="beginRow" value=""/> a <input type="text" name="endRow" id="endRow" valor =""/> fila</td><td rowspan="2" id="prueba"><tipo de entrada="botón" nombre="hebing" id="hebing" valor="Fusionar" onClick="rebulid();"/> </td></tr>
<tr><td>De la columna <input type="text" name="beginCol" id="beginCol" value=""/> a <input type="text" name="endCol" id="endCol" valor =""/> columna</td></tr>
</tabla>
</div>
</cuerpo>
Generar una tabla usando appendChild escribió
Copie el código de código de la siguiente manera:
función inicio(){
_table=document.getElementById ("tabla");
_table.border="1px";
_table.width="800px";
para(var i=1;i<10;i++){
var fila=document.createElement ("tr");
fila.id=i;
para(var j=1;j<6;j++){
var celda=document.createElement ("td");
celda.id =i+"/"+j;
cell.appendChild(document.createTextNode ("th"+cell.id+"columna"));
fila.appendChild (celda);
}
document.getElementById("newbody").appendChild (fila);
}
}
Para agregar la fila, escriba usando el método appendChild
Copie el código de código de la siguiente manera:
función agregarFila(){
var longitud=document.getElementById("tabla").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(longitud+1).setAttribute("id",longitud+2);*/
var tr=document.createElement("tr");
tr.id=longitud+1;
var td=document.createElement("td");
para(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("th"+td.id+"columna"));
tr.appendChild(td);
}
document.getElementById("nuevocuerpo").appendChild (tr);
}
Otra forma de agregar filas insertRow escribió
Copie el código de código de la siguiente manera:
función addRow_withInsert(){
varrow=document.getElementById("tabla").insertRow( document.getElementById("tabla").rows.length);
var rowCount =document.getElementById("tabla").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var celda=fila.insertCell(i);
cell.innerHTML="new"+(rowCount)+"/"+(i+1)+"columna";
cell.id=(rowCount)+"/"+(i+1);
}
}
Para eliminar una fila, use eliminarRow(índice de fila) escrito
Copie el código de código de la siguiente manera:
/*Eliminar filas usando deleteRow(índice de filas)*/
función eliminarFila(){
/* var fila=document.getElementById("2");
var índice=fila.rowIndex;
alerta(índice);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
Para agregar una columna, use el método insertCell (posición de la columna) para escribir
Copie el código de código de la siguiente manera:
función agregarCelda(){
/*document.getElementById("tabla").rows.item(0).cells.length
Se utiliza para obtener el número de columnas de la tabla.
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="Columna "+(i+1)+"/"+3+";
}
}
Para eliminar una columna, utilice el método deleteCell (posición de la columna) para escribir
Copie el código de código de la siguiente manera:
/*Eliminar una columna usando el método deleteCell(posición de la columna)*/
función eliminarCelda(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("tabla").rows[i].deleteCell(0);
}
}
Fusionar celdas (no implementada) escribió
Hay un problema con mi código, principalmente porque la tabla estará estropeada y no se ha corregido:
Copie el código de código de la siguiente manera:
función rebulida(){
var beginRow=document.getElementById("beginRow").value;/*Iniciar fila*/
var endRow=document.getElementById("endRow").value;/*Fin de fila*/
var comenzarCol=document.getElementById("beginCol").value;/*comenzar columna*/
var endCol=document.getElementById("endCol").value;/*Fin de columna*/
var tempCol=beginRow+"/"+beginCol;/*Localice la columna cuyos atributos desea cambiar*/
alerta(tempCol);
var td=document.getElementById(tempCol);
/*Eliminar las celdas a fusionar*/
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
si(x==comenzarFila){
document.getElementById("tabla").rows[x].deleteCell(i+1);
}
demás{
document.getElementById("tabla").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}