동적 테이블 행과 열

테이블에 행/열을 추가/제거 할 수 있기를 원하지만 js/jquery에 대한 지식이 기본이므로이를 달성하는 방법이 없습니다. 나는 관련 주제를 검색하고 보았지만 어떤 일이 일어나길 원하는지는 알 수 없습니다.동적 테이블 행과 열

아래 코드에서 알 수 있듯이 <th> 태그가있는 11 개의 열과 기본 행이 있으며이 태그는 제거의 영향을받지 않아야합니다. 주문서 증가 PO와 같은 출력의 10

<table class="main-table" id="po-table" border="1"> 
    <tbody> 
     <tr class="table-header"> 
      <td>#</td> 
      <td>Course Code</td> 
      <td>Course Name</td> 
      <td>PO 1</td> 
      <td>PO 2</td> 
      <td>PO 3</td> 
      <td>PO 4</td> 
      <td>PO 5</td> 
      <td>PO 6</td> 
      <td>PO 7</td> 
      <td>PO 8</td> 
      <td>PO 9</td> 
     </tr> 
     <tr class="default-row"> 
      <td>1</td> 
      <td><input type="text" name="course_code[]"></td> 
      <td><input type="text" name="course_name[]"></td> 
      <td><input type="checkbox" name="po1[]" value="Po1"></td> 
      <td><input type="checkbox" name="po2[]" value="Po2"></td> 
      <td><input type="checkbox" name="po3[]" value="Po3"></td> 
      <td><input type="checkbox" name="po4[]" value="Po4"></td> 
      <td><input type="checkbox" name="po5[]" value="Po5"></td> 
      <td><input type="checkbox" name="po6[]" value="Po6"></td> 
      <td><input type="checkbox" name="po7[]" value="Po7"></td> 
      <td><input type="checkbox" name="po8[]" value="Po8"></td> 
      <td><input type="checkbox" name="po9[]" value="Po9"></td> 
     </tr> 
    </tbody> 
</table>

사진을 새 열을 추가 할 때 또한 : enter image description here

출처

2014-11-10 Meltdowner

몸,691이 추가http://www.redips.net/javascript/adding-table-rows-and-columns/

<button onclick="addRow()">Add Row</button> 
 
<button onclick="addCol()">Add Column</button> 
 

 

 
<button onclick="removeRow()">Remove Row</button> 
 
<button onclick="removeCol()">Remove Column</button> 
 

 
<script> 
 
var table = document.getElementById("po-table"); 
 

 
function addRow() { 
 
    
 
    var lastrow = table.rows.length; 
 
\t var lastcol = table.rows[0].cells.length; \t 
 
\t var row = table.insertRow(lastrow); \t 
 
\t var cellcol0 = row.insertCell(0); 
 
\t cellcol0.innerHTML = "<input type='text' name='course_code[]'></input>"; 
 
\t var cellcol1 = row.insertCell(1); 
 
\t cellcol1.innerHTML = "<input type='text' name='course_name[]'></input>"; 
 
\t 
 
\t for(i=2; i<lastcol;i++) 
 
\t { 
 
\t \t var cell1 = row.insertCell(i); 
 
\t \t cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>"; 
 
\t } 
 
    
 
} 
 
function addCol() { 
 
    
 
    var lastrow = table.rows.length; 
 
\t var lastcol = table.rows[0].cells.length; 
 
\t var headertxt = table.rows[0].cells[lastcol-1].innerHTML; 
 
\t var headernum = headertxt.slice(headertxt.indexOf("PO")+2); 
 
\t headernum = headernum.trim(); 
 
\t 
 
    //for each row add column 
 
\t for(i=0; i<lastrow;i++) 
 
\t { 
 
\t \t 
 
\t \t var cell1 = table.rows[i].insertCell(lastcol); 
 
\t \t if(i==0) 
 
\t \t \t cell1.innerHTML = "PO " + (Number(headernum)+1); 
 
\t \t else 
 
\t \t \t cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>"; 
 
\t \t 
 
\t } 
 
} 
 

 
function removeRow(){ 
 
\t var lastrow = table.rows.length; 
 
\t if(lastrow<2){ 
 
\t \t alert("You have reached the minimal required rows."); 
 
\t \t return; 
 
\t } 
 
\t table.deleteRow(lastrow-1); 
 
} 
 

 
function removeCol(){ 
 

 
\t var lastcol = (table.rows[0].cells.length)-1; 
 
\t var lastrow = (table.rows.length); 
 
\t //disallow first two column removal unless code is add to re-add text box columns vs checkbox columns 
 
\t if(lastcol<3){ 
 
\t \t alert("You have reached the minimal required columns."); 
 
\t \t return; 
 
\t } 
 
\t 
 
\t //for each row remove column 
 
\t for(i=0; i<lastrow;i++) 
 
\t { 
 
\t \t table.rows[i].deleteCell(lastcol); 
 
\t } 
 
} 
 
</script>

입력 행과 열의에 대한 테이블의 동적 생성을 위해

출처

2014-11-10 14:40:21 userDEV

난 당신이 이해했다고 생각이 코드를 사용할 수 있으며 나는 내가하는 것보다 더 나은 방법을 원했던 것을 지각했다. 고맙습니다. 선생님 : D – Meltdowner

이건 너무 늦지 않았 으면 합니다만, 다시 도울 수 있겠습니까? Course Code 이전에 새로운 열을 추가하고 행의 번호에 관한 것입니다. 사용자가 새 행을 추가 할 때마다 2, 3 등이됩니다. 내 코드와 편집 코드를 모두 편집했습니다. 나는 위의 내 게시물을 편집했습니다. – Meltdowner

@Meltdowner 새로운 질문이있는 경우이 질문에 대한 대답을 수정하는 대신 새 질문을 만드십시오. – Tom

당신은 현재의 행을 복제하고 다음 jQuery를 함께 테이블에 추가 할 수 있습니다 :

를

$(".default-row").clone().insertAfter(".default-row:last-child");

이 작업의 예는 여기에 있습니다 : http://jsfiddle.net/05Lo1sm6/

출처

2014-11-10 14:29:23

, 당신은

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Dynamic Table</title> 
<script> 
function createTable() 
{ 
rn = window.prompt("Input number of rows", 1); 
cn = window.prompt("Input number of columns",1); 

for(var r=0;r<parseInt(rn,10);r++) 
    { 
    var x=document.getElementById('myTable').insertRow(r); 
    for(var c=0;c<parseInt(cn,10);c++) 
    { 
    var y= x.insertCell(c); 
    y.innerHTML="Row-"+r+" Column-"+c; 
    } 
    } 
} 

</script> 
<style type="text/css"> 
body {margin: 30px;} 
</style> 
</head><body> 
<table id="myTable" border="1"> 
</table><form> 
<input type="button" onclick="createTable()" value="Create the table"> 
</form></body></html>

출처

2017-11-14 12:23:45

동적 테이블 행과 열

답변

관련 문제