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

면접 때 이런 문제에 부딪혔던 기억이 나네요. 양식이 있고 입력 상자가 4개 있고 병합 버튼이 있습니다. 입력 상자는 어느 행에서 어느 행으로, 어느 열에서 어느 열로 이렇게 되어 있습니다. . 을 클릭한 다음 버튼을 클릭하여 병합합니다. 학교를 졸업하고 JS에 대해 조금밖에 몰랐지만 전혀 할 수가 없었어요! 지금 생각해보면 이 질문은 사실 기본기가 탄탄한지 테스트하는 질문인 것 같아요! 관심이 있으시면 직접 해보고 할 수 있는지 테스트해 보세요. 질문 스크린샷:

이제 이 질문을 하게 됐네요. 간단한 것 같지만, 그래도 시간이 많이 걸렸네요. 제 생각이 틀렸나봐요. 가장 중요한 것은 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;
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.