jQuery없이 JS의 동적 HTML 테이블 (해결됨)

JS에서 동적 HTML 테이블을 만드는 방법은 무엇입니까? 더 나은 방법 (appendChild 또는 innerHTML)과 이 아닌은 jQuery를 사용합니다. 예를 들어 6 개의 버튼이 있어야합니다.jQuery없이 JS의 동적 HTML 테이블 (해결됨)

시작할 테이블을 추가하십시오.
중간에 행 추가;
끝까지 행 추가;
첫 번째 행 삭제.
가운데 행 삭제;
마지막 행 삭제; 해결

UPD : 여기

function addRow(val) { 

      // Get a reference to the table 
      var tbl = document.getElementById('mytable'); 
      var lastRow = tbl.rows.length; 
      var tmp = 1; 
      if (val == 1) tmp = 1; 
      if (val == 2) tmp = lastRow/2; 
      if (val == 3) tmp = lastRow - 1; 

      // Insert a row in the table at row index 
      var newRow = tbl.insertRow(tmp); 

      // Insert a cell in the row at index 0 1 2 3 
      var newCell = newRow.insertCell(0); 
      var newCell1 = newRow.insertCell(1); 
      var newCell2 = newRow.insertCell(2); 
      var newCell3 = newRow.insertCell(3); 

      // Append a text node to the cell 
      var newText = document.createTextNode('New row') 
      newCell.appendChild(newText); 
     } 


     function removeLast() { 
      var tbl = document.getElementById('mytable'); 
      var lastRow = tbl.rows.length; 
      if (lastRow > 2) tbl.deleteRow(lastRow - 2); 
     } 


     function removeFirst() { 
      var tbl = document.getElementById('mytable'); 
      var lastRow = tbl.rows.length; 
      if (lastRow > 2) tbl.deleteRow(1); 
     } 


     function removeMiddle() { 
      var tbl = document.getElementById('mytable'); 
      var lastRow = tbl.rows.length; 
      if (lastRow > 2) tbl.deleteRow(lastRow/2 - 1); 
     }

출처

2012-05-18 Smit

jQuery를 사용하지 않는 이유는 무엇입니까? – dezso

jQuery는 단지 32kb 공간 만 차지하므로, 왜 사용하지 않을까요? 그것을 사용하여 많은 시간을 절약 할 수 있습니다 ... jQuery없이 그런 일을하는 것은 바퀴를 다시 발명하려고합니다. –

처음에는 jQuery없이 작동하는 방법과 다음 단계에서 두 가지 방법을 비교하는 방법을 분명히 이해하고 싶습니다. – Smit

내가 그 그것의 일부가 버튼을 사용하여 수행 볼 수있는 튜토리얼입니다.

당신은 그에서 추정 할 수 있어야한다 :

http://www.mredkj.com/tutorials/tableaddrow.html

그러나 나는이 의견에 동의, 왜 jQuery를 또는 다른 프레임 워크를 사용하지 마십시오.

출처

2012-05-18 09:05:59

var table=document.getElementById('table') 
    var x; 
    for(var j=0; j<list.length; j++){ 
     x=table.insertRow(-1); 
     for(var i=0; i<40; i++) 
      x.insertCell(i).innerHTML=list[j][i];

이것은 내가 동적 테이블을 만드는 방법입니다. 그 후 추가 또는 삭제할 행을 색인 할 수 있습니다. 이것은 JS에서 DOM 속성을 사용하여 모두 수행됩니다 (실제로 JQ는 모르지만 사용자가 번역 할 수 있음을 확신합니다).이 접근법을 사용하면 테이블의 가운데 행을 찾는 함수를 추가 할 수 있습니다. 당신은 쉽게이 방법은 그것을 추가하기 때문에 동적으로 인덱스에 따라 당신이

table.deleteRow(table.rows.length-1);//deletes last row 
table.deleteRow(0); //deletes first row

는 DOM 테이블에 대한 자세한 내용을 읽으려면 보내 수 있습니다 사용자가 행을 추가하거나 어디서든 테이블의 행을 제거 할 수 있도록하고 싶었 또한 경우 방법 : http://www.javascriptkit.com/domref/tablemethods.shtml

출처

2012-05-18 12:59:25 GreenGiant

jQuery없이 JS의 동적 HTML 테이블 (해결됨)

답변

관련 문제