js動的html要素の生成

ここでは、後で必要なときに便利に使用するための簡単な例を示します.

function add(){
	
	var table = document.getElementById("tbody");

	var tr = document.createElement("tr");
	
	table.appendChild(tr);
	
	var td1 = document.createElement("td");
	
	var td2 = document.createElement("td");
	
	tr.appendChild(td1);
	
	tr.appendChild(td2);
	
	var text =  document.createElement("input");
	text.type = "text";
	text.name = "name";
	td1.appendChild(text);
	
	var sel = document.createElement("select");
	sel.name = "state"
	td2.appendChild(sel);
	
	sel.options.add(new Option("  ","0"));
	sel.options.add(new Option("  ","1"));
}
function del(){
	var trs = document.getElementsByTagName("tr");
	
	var tbody = document.getElementById("tbody");
	tbody.removeChild(trs[trs.length - 1]);
}

 
add()関数は、tableにtrを追加し、テキストボックスとドロップダウンリストを追加します.
次はhtml

<table id="tab" border="1">
		<tbody id="tbody">
			<tr>
				<td align="right" colspan="2">
				<input type="button" value="  " onclick="add()" />
				<input type="button" value="  " onclick="del()" />
				</td>
			</tr>
			<tr>
				<td>    </td>
				<td>    </td>
			</tr>
			<tr>
				<td>gfdfdsafsd</td>
				<td>0</td>
			</tr>
		</tbody>
	</table>