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>

输出图片： enter image description here

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;
	var lastcol = table.rows[0].cells.length;	
	var row = table.insertRow(lastrow);	
	var cellcol0 = row.insertCell(0);
	cellcol0.innerHTML = "<input type='text' name='course_code[]'></input>";
	var cellcol1 = row.insertCell(1);
	cellcol1.innerHTML = "<input type='text' name='course_name[]'></input>";
	
	for(i=2; i<lastcol;i++)
	{
		var cell1 = row.insertCell(i);
		cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>";
	}
    
}
function addCol() {
    
    var lastrow = table.rows.length;
	var lastcol = table.rows[0].cells.length;
	var headertxt = table.rows[0].cells[lastcol-1].innerHTML;
	var headernum = headertxt.slice(headertxt.indexOf("PO")+2);
	headernum = headernum.trim();
	
    //for each row add column
	for(i=0; i<lastrow;i++)
	{
		
		var cell1 = table.rows[i].insertCell(lastcol);
		if(i==0)
			cell1.innerHTML = "PO " + (Number(headernum)+1);
		else
			cell1.innerHTML = "<input type='checkbox' name='pos[]'></input>";
		
	}
}

function removeRow(){
	var lastrow = table.rows.length;
	if(lastrow<2){
		alert("You have reached the minimal required rows.");
		return;
	}
	table.deleteRow(lastrow-1);
}

function removeCol(){

	var lastcol = (table.rows[0].cells.length)-1;
	var lastrow = (table.rows.length);
	//disallow first two column removal unless code is add to re-add text box columns vs checkbox columns
	if(lastcol<3){
		alert("You have reached the minimal required columns.");
		return;
	}
	
	 //for each row remove column
	for(i=0; i<lastrow;i++)
	{
		table.rows[i].deleteCell(lastcol);
	}
}
</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>

动态表行和列

3 个答案: