现在做这个问题,看起来简单,但我还是花了很长时间,可能是我的思路不对吧?主要就是用js来操作html,我现在实现了添加行,删除行,添加列,删除列 ,但合并单元格却不能完整的实现 ,主要是表格会乱掉 。现在把这个问">
> 웹 프론트엔드 > JS 튜토리얼 > js 연산표 예시(개인 경험)_javascript 실력

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

WBOY
풀어 주다: 2016-05-16 17:11:30
원래의
1224명이 탐색했습니다.

면접 때 이런 문제에 부딪혔던 기억이 나네요. 양식이 있고 입력 상자가 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;
}
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿