Lembro que encontrei um problema assim durante uma entrevista: existe um formulário e, em seguida, existem 4 caixas de entrada e um botão de mesclagem. A caixa de entrada se parece com isto, de qual linha para qual linha e de qual coluna para qual coluna. . e clique no botão para mesclar. Quando saí da escola, eu só sabia um pouco sobre JS, mas não conseguia fazer nada! Agora que penso nisso, esta questão realmente testa se as habilidades básicas são sólidas! Se estiver interessado, você pode fazer isso sozinho e testar se consegue. Captura de tela da pergunta:
Resolver esse problema agora parece simples, mas ainda demorei muito. Talvez meu pensamento esteja errado? O principal é usar js para operar html. Agora implementei a adição de linhas, a exclusão de linhas, a adição de colunas e a exclusão de colunas. No entanto, a mesclagem de células não pode ser totalmente realizada, principalmente porque a tabela ficará confusa. Agora poste essa pergunta, os colegas interessados podem estudá-la quando tiverem tempo e ver se conseguem! Principalmente o problema é mesclar células! Você também pode me ajudar a descobrir o problema de mesclar células.
Parte do código que eu mesmo implementei:
A parte html escreve
Copie o código do código da seguinte forma:
<body onLoad="init();">
<tabela id="tabela" alinhar="centro">
<tbody id="newbody"></tbody>
</tabela>
<div>
<tabela alinhar="centro">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="Adicionar linha"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="Remover linha"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();"
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();"
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="Adicionar linha"/>< /td></tr>
</tabela>
</div>
<div>
<tabela alinhar="centro">
<tr><td>Da linha <input type="text" id="beginRow" name="beginRow" value=""/> para <input type="text" name="endRow" id="endRow" value =""/> linha</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="Merge" onClick="rebulid();"/> </td></tr>
<tr><td>Da coluna <input type="text" name="beginCol" id="beginCol" value=""/> para <input type="text" name="endCol" id="endCol" value =""/> coluna</td></tr>
</tabela>
</div>
</body>
Gere uma tabela usando appendChild escrito
Copie o código do código da seguinte forma:
função inicialização(){
_table=document.getElementById ("tabela");
_tabela.border="1px";
_tabela.largura="800px";
for(var i=1;i<10;i++){
var linha = document.createElement ("tr");
linha.id=i;
para(var j=1;j<6;j++){
var cell=document.createElement("td");
célula.id =i+"/"+j;
cell.appendChild(document.createTextNode ("th"+cell.id+"coluna"));
linha.appendChild (célula);
}
document.getElementById("newbody").appendChild (linha);
}
}
Para adicionar a linha, escreva usando o método appendChild
Copie o código do código da seguinte forma:
função addRow(){
var length=document.getElementById("tabela").rows.length;
/*document.getElementById("newbody").insertRow(comprimento);
document.getElementById(comprimento+1).setAttribute("id",comprimento+2);*/
var tr=document.createElement("tr");
tr.id=comprimento+1;
var td=document.createElement("td");
para(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("th"+td.id+"coluna"));
tr.appendChild(td);
}
document.getElementById("novocorpo").appendChild(tr);
}
Outra maneira de adicionar linhas que insertRow escreveu
Copie o código do código da seguinte forma:
função addRow_withInsert(){
varrow=document.getElementById("tabela").insertRow( document.getElementById("tabela").rows.length);
var rowCount =document.getElementById("tabela").rows.length;
var countCell=document.getElementById("tabela").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var célula = linha.insertCell (i);
cell.innerHTML="new"+(rowCount)+"/"+(i+1)+"coluna";
cell.id=(rowCount)+"/"+(i+1);
}
}
Para excluir uma linha, use deleteRow(row Index) escreveu
Copie o código do código da seguinte forma:
/*Excluir linhas usando deleteRow(row Index)*/
função removeRow(){
/* var row=document.getElementById("2");
var index=row.rowIndex;
alerta(índice);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("tabela").rows.length).rowIndex);
}
Para adicionar uma coluna, use o método insertCell (posição da coluna) para escrever
Copie o código do código da seguinte forma:
função addCell(){
/*document.getElementById("tabela").rows.item(0).cells.length
Usado para obter o número de colunas na tabela
*/
for(var i=0;i<document.getElementById("tabela").rows.length;i++){
var cell=document.getElementById("tabela").rows[i].insertCell(2);
cell.innerHTML="Coluna "+(i+1)+"/"+3+";
}
}
Para excluir uma coluna, use o método deleteCell (posição da coluna) para escrever
Copie o código do código da seguinte forma:
/*Excluir uma coluna usando o método deleteCell(column position)*/
função removeCell(){
for(var i=0;i<document.getElementById("tabela").rows.length;i++){
document.getElementById("tabela").rows[i].deleteCell(0);
}
}
Mesclar células (não implementadas) escreveu
Há um problema no meu código, principalmente porque a tabela estará bagunçada e não foi corrigida:
Copie o código do código da seguinte forma:
função reconstruir(){
var BeginRow=document.getElementById("beginRow").value;/*Linha inicial*/
var endRow=document.getElementById("endRow").value;/*Fim da linha*/
var BeginCol=document.getElementById("beginCol").value;/*início da coluna*/
var endCol=document.getElementById("endCol").value;/*Coluna final*/
var tempCol=beginRow+"/"+beginCol;/*Localize a coluna cujos atributos você deseja alterar*/
alerta(tempCol);
var td=document.getElementById(tempCol);
/*Exclua as células a serem mescladas*/
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("tabela").rows[x].deleteCell(i+1);
}
outro{
document.getElementById("tabela").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}