js 연산표 예시(개인 경험)_javascript 실력-JS 튜토리얼-php.cn

js 연산표 예시(개인 경험)_javascript 실력

WBOY

풀어 주다： 2016-05-16 17:11:30

원래의

1204명이 탐색했습니다.

면접 때 이런 문제에 부딪혔던 기억이 나네요. 양식이 있고 입력 상자가 4개 있고 병합 버튼이 있습니다. 입력 상자는 어느 행에서 어느 행으로, 어느 열에서 어느 열로 이렇게 되어 있습니다. . 을 클릭한 다음 버튼을 클릭하여 병합합니다. 학교를 졸업하고 JS에 대해 조금밖에 몰랐지만 전혀 할 수가 없었어요! 지금 생각해보면 이 질문은 사실 기본기가 탄탄한지 테스트하는 질문인 것 같아요! 관심이 있으시면 직접 해보고 할 수 있는지 테스트해 보세요. 질문 스크린샷:
js 연산표 예시(개인 경험)_javascript 실력
이제 이 질문을 하게 됐네요. 간단한 것 같지만, 그래도 시간이 많이 걸렸네요. 제 생각이 틀렸나봐요. 가장 중요한 것은 js를 사용하여 html을 조작하는 것입니다. 이제 행 추가, 행 삭제, 열 추가 및 열 삭제를 구현했습니다. 그러나 주로 테이블이 엉망이 되기 때문에 셀 병합을 완전히 구현할 수 없습니다. 이제 이 질문을 게시하세요. 관심 있는 동료들이 시간이 있을 때 공부하고 해낼 수 있는지 확인할 수 있습니다! 주로 문제는 셀을 병합하는 것입니다! 셀 병합 문제를 파악하는 데 도움을 줄 수도 있습니다.

직접 구현한 코드 부분 :
html 부분이 씁니다

코드 복사코드

　
　　
　
　
　　
　
　< ;td align=" center" colspan="2">< ;/td>< ;/tr>

라인 text" name= "endRow" id="endRow" value=""/> 행
<입력 유형에서 ="text " name="beginCol" id="beginCol" value=""/> 열을 td>

appendChild를 사용하여 테이블 생성

코드 복사

코드는 다음과 같습니다. function init(){ _table=document.getElementById ( "테이블");

_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 ("cell.id "column")) 
 row.appendChild (cell) 
 } 
　document.getElementById("newbody").appendChild (row); 
　} 
} 

 
행 추가,appendChild 메소드를 사용하여 작성 

코드 복사

코드는 다음과 같습니다.

 
function addRow(){ 
var length=document.getElementById("table").rows.length; 
/*document.getElementById("newbody").insertRow(length); 
　　document.getElementById(길이 1).setAttribute("id",length 2);*/ 
　　var tr=document.createElement("tr"); 
　　tr.id=길이 1; 
　　var td=document.createElement("td"); 
　　for(i=1;i　　　　td.id=tr.id "/" i; 
　　　　td.appendChild(document.createTextNode("第" td.id "列")); 
　　　　tr.appendChild(td); 

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

添加行的另一种方法insertRow 写道

复主代码代码아래:

 
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　　　var cell=row.insertCell(i); 

　　　cell.innerHTML="新" (rowCount) "/" (i 1) "列"; 
　　　cell.id=(rowCount) "/" (i 1); 

　　} 
} 

删除行，采用deleteRow(row Index) 写道

复代码代码如下:

 
/*删除行，采用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); 
} 

添加列，采用insertCell(列位置)방법 写道

复代码代码如下:

 
function addCell(){ 
/*document.getElementById("table").rows.item(0).cells.length 
용 来获得表格적列数 
*/ 
for(var i=0;i　　var cell=document.getElementById("table"). 행[i].insertCell(2); 
　　cell.innerHTML="第" (i 1) "/" 3 "列"; 

} 
} 

删除列，采用deleteCell(列位置)적 방법 写道

复代码代码如下:

 
/*删除列，采用deleteCell(列位置)적 방법*/ 
function RemoveCell(){ 
　　for(var i=0;i　　　　document.getElementById("table").rows[i].deleteCell(0); 
　　} 
} 

合并单元格(未实现) 写道
我的代码有问题，要是表格会乱掉，一直没有改好：

复代码码代码如下:

 
function rebulid(){ 
var startRow=document.getElementById( "beginRow").value;/*开始行*/ 
var endRow=document.getElementById("endRow").value;/*结束行*/ 

var startCol=document.getElementById(" startCol").value;/*开始列*/ 
var endCol=document.getElementById("endCol").value;/*结束列*/ 

var tempCol=beginRow "/" startCol; /*정확한 상태*/ 
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; 
} 