Динамические строки и столбцы таблицы

Question

Я хотел бы иметь возможность добавлять/удалять строки/столбцы в моей таблице, но я не понимаю, как это сделать, учитывая, что мои знания в js/jquery являются базовыми. Я занимаюсь поиском и просмотром связанных тем, но никто не подходит к тому, что я хотел.

Как вы можете видеть в моем коде ниже, у меня есть 11 столбцов с тегом <th> и строка по умолчанию, и они не должны быть затронуты удалением. Кроме того, при добавлении нового столбца приростов PO как 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> 

Изображения выхода:

Answer 1

Добавьте это к вашему телу 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>

Answer 2

Вы можете просто клонировать текущую строку и добавить его в таблицу со следующим JQuery:

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

пример его работы здесь: http://jsfiddle.net/05Lo1sm6/

Answer 3

для динамического создания таблиц по отношению к введенному строки и столбца, вы можете использовать этот код

<!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>