Of Stack

Js operation table sample of personal notes

  • 2020-03-30 00:39:52
  • OfStack
I remember in the interview I had this problem: I had a table, and then I had four fields, and then I had a merge button, and then I had a merge button, and then I had a row to row, and then I had a column to column, and then I hit the button to merge. At that time I came out of school, js knowledge just know some, simply can't do! Now think about, in fact, this problem is also to test the foundation of kung fu is solid! If you're interested, you can do it yourself and see if you can do it. Screenshot of the title:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311291704114.gif? 2013102917425 ">  
Now, doing this problem, it seems easy, but it took me a long time. Maybe I was thinking the wrong way? The main operation is to use js to operate HTML, I now implemented to add rows, delete rows, add columns, delete columns, but merge cells but not a complete implementation, mainly because the table will be messy. Send out this problem now, the colleague that is interested in can oneself at free time research next, see oneself can make! It's all about merging cells! You can also look at merging cells for me.

Part of the code I implemented myself:
The HTML section says 
 
<body onLoad="init();"> 

<table id="table" align="center"> 
<tbody id="newbody"></tbody> 

</table> 
<div> 
<table width="800px" border="1px" align="center"> 
　　<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value=" Add the line "/></td> 
　　　　<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value=" Delete rows "/></td> 
　　</tr> 
　　<tr><td align="center"><input type="button" id="delCell"　name="delCell" onClick="removeCell();" value=" Delete the column "/></td> 
　　　　<td align="center"><input type="button"　id="addCell" name="addCell" onClick=" addCell();" value=" Add columns "/></td> 
　</tr> 
　<tr><td align="center" colspan="2"><input type="button" id="addRows"　name="addRows" onClick="addRow_withInsert();" value=" Add the line "/></td></tr> 
</table> 
</div> 
<div> 
<table width="800px" border="1px" align="center"> 
　　　<tr><td> From the first <input type="text" id="beginRow" name="beginRow" value=""/>  Row to <input type="text" name="endRow" id="endRow" value=""/>  line </td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value=" merge " onClick="rebulid();"/> </td></tr> 
　　<tr><td> From the first <input type="text" name="beginCol" id="beginCol" value=""/>  Column to <input type="text" name="endCol" id="endCol" value=""/>  column </td></tr> 
</table> 
</div> 
</body>

Create a table and write with appendChild 
 
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 (" The first "+cell.id+" column ")); 
　　　row.appendChild (cell); 
　　} 
　　document.getElementById("newbody").appendChild (row); 
　} 
}

Add a line, write using the appendChild method 
 
function addRow(){ 
var length=document.getElementById("table").rows.length; 
 
　　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(" The first "+td.id+" column ")); 
　　　　tr.appendChild(td); 

　　} 
　　document.getElementById("newbody").appendChild (tr); 
}

Another way to add a row, insertRow writes 
 
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); 

　　} 
}

Delete a row, write in deleteRow(row Index) 
 
 
function removeRow(){ 
 
　　　document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex); 
}

Add a column, write it using the insertCell(column position) method 
 
function addCell(){ 
 
for(var i=0;i<document.getElementById("table").rows.length;i++){ 
　　var cell=document.getElementById("table").rows[i].insertCell(2); 
　　cell.innerHTML=" The first "+(i+1)+"/"+3+" column "; 

} 
}

Delete column, write in deleteCell(column position) 
 
 
function removeCell(){ 
　　for(var i=0;i<document.getElementById("table").rows.length;i++){ 
　　　　document.getElementById("table").rows[i].deleteCell(0); 
　　} 
}

Merge cell (not implemented) write
There is something wrong with my code. The main problem is that the form will be messed up, and it has not been changed properly. 
 
function rebulid(){ 
var beginRow=document.getElementById("beginRow").value; 
var endRow=document.getElementById("endRow").value; 

var beginCol=document.getElementById("beginCol").value; 
var endCol=document.getElementById("endCol").value; 

var tempCol=beginRow+"/"+beginCol; 
alert(tempCol); 
var td=document.getElementById(tempCol); 

 
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; 
}
Related articles: