<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('#Add').click(function(e) {
var TR = $('<tr></tr>');
var TD1 = $('<td></td>');
var TD2 = $('<td></td>');
var Opt = $('<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">...</option> </select> - <select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">...</option> </select>');
var Del = $('<input type="button" id="Add" value="ลบ">').click(function(e) {
$(this).parent().parent().remove();
});
Opt.appendTo(TD2)
TD1.appendTo(TR);
Del.appendTo(TD2);
TD2.appendTo(TR)
TR.appendTo('
#targetrows');
});
});
</script>
</head>
<body>
<table width="50%" align="center">
<thead>
<tr id="Result">
<td width="27%">ช่วงที่ผลผลิตมีปริมาณมาก: </td>
<td width="73%">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">...</option>
</select>
-
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">...</option>
</select>
<input type="button" id="Add" value="เพิ่ม">
</td>
</tr>
</thead>
<tbody
id="targetrows"><!-- เป้าหมายตรงที่จะเพิ่ม tbody ชุดแรก -->
</tbody>
<tbody ><!-- tbody ชุด 2 -->
<tbody>
<tr>
<td>tbody ชุดที่ 2</td>
<td>tbody ชุดที่ 2</td>
</tr>
</tbody>
</tbody>
</table>
</body>
</html>
