I remember that I encountered such a problem during an interview: There is a form, and then there are 4 input boxes and a merge button. The input box looks like this, from which row to which row, and from which column to which column. , and then click the button to merge. When I came out of school, I only knew a little about JS, but I couldn't do it at all! Now that I think about it, this question actually tests whether the basic skills are solid! If you are interested, you can do it yourself and test whether you can do it. Screenshot of the question:
Doing this problem now seems simple, but it still took me a long time. Maybe my thinking is wrong? The main thing is to use js to operate html. I have now implemented adding rows, deleting rows, adding columns, and deleting columns. However, merging cells cannot be fully realized, mainly because the table will be messed up. Now post this question, interested colleagues can study it when they have time and see if they can make it! Mainly the problem is merging cells! You can also help me figure out the problem of merging cells.
Part of the code I implemented myself:
The html part writes
Copy the code code as follows:
<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="Add row"/></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="Remove column"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="Add column"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="Add row"/>< /td></tr>
</table>
</div>
<div>
<table align="center">
<tr><td>From line <input type="text" id="beginRow" name="beginRow" value=""/> to <input type="text" name="endRow" id="endRow" value=""/> row</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="Merge" onClick="rebulid();"/> </td></tr>
<tr><td>From column <input type="text" name="beginCol" id="beginCol" value=""/> to <input type="text" name="endCol" id="endCol" value=""/> column</td></tr>
</table>
</div>
</body>
Generate a table using appendChild wrote
Copy the code code as follows:
function init(){
_table=document.getElementById ("table");
_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 (cell);
}
document.getElementById("newbody").appendChild (row);
}
}
To add the row, write using appendChild method
Copy the code code as follows:
function 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);
}
Another way to add rows insertRow wrote
Copy the code code as follows:
function 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);
}
}
To delete a row, use deleteRow(row Index) wrote
Copy the code code as follows:
/*Delete rows using deleteRow(row Index)*/
function removeRow(){
/* var row=document.getElementById("2");
var index=row.rowIndex;
alert(index);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
To add a column, use the insertCell (column position) method to write
Copy the code code as follows:
function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
Used to get the number of columns in the table
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="Column "+(i+1)+"/"+3+";
}
}
To delete a column, use deleteCell (column position) method to write
Copy the code code as follows:
/*Delete a column using deleteCell(column position) method*/
function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
Merge cells (not implemented) wrote
There is a problem with my code, mainly because the table will be messed up, and it has not been corrected:
Copy the code code as follows:
function 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;/*End column*/
var tempCol=beginRow+"/"+beginCol;/*Locate the column whose attributes you want to change*/
alert(tempCol);
var td=document.getElementById(tempCol);
/*Delete the cells to be merged*/
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);
}
else{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}