Question

我想创建一个包含行和三列以及select和input标记的表。

像这样：

<script>
function myaddorder(){
 	
	    //make field products
	var selectnew = document.createElement("SELECT");
	//make field style
	var selectnew2 = document.createElement("SELECT");
	//make field numbers
	var selectnew3 = document.createElement("INPUT");
	
	
	var optprt1 = document.createElement("option");
	var optprt2 = document.createElement("option");
	optprt1.text = "pro1";
	optprt2.text = "pro2";
	selectnew.add(optprt1);
	selectnew.add(optprt2);
	
	var optst1 = document.createElement("option");
	var optst2 = document.createElement("option");
	optst1.text = "stlye1";
	optst2.text = "stlye2";
	selectnew2.add(optst1);
	selectnew2.add(optst2);
	
	selectnew.setAttribute("id" , "seletpro");
	selectnew2.setAttribute("id" , "selectstyle");
	selectnew3.setAttribute("id" , "selectnum");
	
	
	
	
	document.body.appendChild(selectnew);
	document.body.appendChild(selectnew2);
	document.body.appendChild(selectnew3);
	
	


	
}
	function mydelorder() {
    document.getElementById("seletpro").remove();
	document.getElementById("selectstyle").remove();
	document.getElementById("selectnum").remove();
}
</script>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="div1">
<table id="formorder">
	<tr>
    	<td>
    		<select id="seletpro">
            	<option value="pro">pro</option>
            	<option value="pro1">pro1</option>
            	<option value="pro2">pro2</option>
            	<option value="pro3">pro3</option>
			</select>
            
    	</td>
    	<td>
    		<select id="selectstyle">
            	<option value="stlye1">stlye1</option>
           	 	<option value="stlye2">stlye2</option>
       	 	</select>
           
    	</td>
   		<td><input id="selectnum"><span id="fooBar">&nbsp;</span></td>
        </tr>
    </table>
</div>
    
<button onclick="myaddorder()">+</button>
<button onclick="mydelorder()">-</button>
<script>
function myaddorder(){
 	
	    //make field products
	var selectnew = document.createElement("SELECT");
	//make field style
	var selectnew2 = document.createElement("SELECT");
	//make field numbers
	var selectnew3 = document.createElement("INPUT");
	
	
	var optprt1 = document.createElement("option");
	var optprt2 = document.createElement("option");
	optprt1.text = "pro1";
	optprt2.text = "pro2";
	selectnew.add(optprt1);
	selectnew.add(optprt2);
	
	var optst1 = document.createElement("option");
	var optst2 = document.createElement("option");
	optst1.text = "stlye1";
	optst2.text = "stlye2";
	selectnew2.add(optst1);
	selectnew2.add(optst2);
	
	selectnew.setAttribute("id" , "seletpro");
	selectnew2.setAttribute("id" , "selectstyle");
	selectnew3.setAttribute("id" , "selectnum");
	
	
	
	
	document.body.appendChild(selectnew);
	document.body.appendChild(selectnew2);
	document.body.appendChild(selectnew3);
	
	


	
}
	function mydelorder() {
    document.getElementById("seletpro").remove();
	document.getElementById("selectstyle").remove();
	document.getElementById("selectnum").remove();
}
</script>
</body>
</html>

但是当我点击加号按钮时，我不想在身体中显示。我希望在列内创建一行并显示。当我按下减号按钮时，反之亦然。

你可以帮帮我吗？

Answer 1

对于添加部分，您需要构建一个可以添加到表中的行。所以你应该替换

document.body.appendChild(selectnew);
document.body.appendChild(selectnew2);
document.body.appendChild(selectnew3);

通过以下方式：

// Create the cells of the new row   
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");

// Add fields to those cells
td1.appendChild(selectnew);
td2.appendChild(selectnew2);
td3.appendChild(selectnew3);

// Create the row itself
tr = document.createElement("tr");

// Add cells to the row
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

// Get the table
tab  = document.getElementById("formorder");

// Add the row to the table
tab.appendChild(tr);

删除部分似乎有效，除了它从表顶部删除元素。您可以通过

获取最后一个元素

document.getElementById("formorder").lastChild;

此外，元素不应该具有相同的＆＃34; id＆＃34;属性。你可以使用＆＃34; class＆＃34;代替。

在表中创建包含3列的行

1 个答案: