Javascript 使用jQuery插入表行
这是我的文凭项目,我想在开头插入一行,选择设备,但我不知道如何使用jQueryJavascript 使用jQuery插入表行,javascript,jquery,Javascript,Jquery,这是我的文凭项目,我想在开头插入一行,选择设备,但我不知道如何使用jQuery <form> <table border="1"> <tr> <td>Kod Peralatan</td> <td>Nama Peralatan</td> </tr> <tr> <
<form>
<table border="1">
<tr>
<td>Kod Peralatan</td>
<td>Nama Peralatan</td>
</tr>
<tr>
<td>
<select>
<option>Choose Equipment</option>
</select>
</td>
<td> </td>
</tr>
</table>
<table>
<tr>
<td align="right">
<button type="button">Add Row</button>
</td>
</tr>
</table>
</center>
</form>
我想这就是你要找的。 这将动态地向设备表中添加新行,并创建一个新的下拉列表,并填充该列表
<!DOCTYPE html>
<html>
<head>
<title>Equipment</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var rows = 0;
function addMoreEquipment() {
rows++;
var options = [{ name: "Item 1", value: "1" }, { name: "Item 2", value: "2" }, { name: "Item 3", value: "3" }];
var row = $("<tr id='row"+ rows +"'><td><select id='equipment" + rows + "'></select></td><td><a href='#' onclick='removeRow(\"row" + rows + "\")'>Remove</a></td></tr>")
$("#equipment").append(row);
for (var i = 0; i < options.length; i++)
$("#equipment" + rows).append(new Option(options[i].name, options[i].value));
}
function removeRow(id) {
$("#" + id).remove();
}
$(document).ready(function() {
addMoreEquipment();
});
</script>
</head>
<body>
<form>
<table border="1" id="equipment">
<tr>
<td>Kod Peralatan</td>
<td>Nama Peralatan</td>
</tr>
</table>
<div style="text-align: right">
<input type="button" onclick="addMoreEquipment()" value="Add Row">
</div>
</form>
</body>
</html>
您可以在此处查看更新的JS Fiddle:
查看jquery教程,它们很棒,并且有一些课程可以教你如何做你想做的事情。请点击此处:如果选择项我想要数据库中的数据…如何使用php编码。。你能给我一些例子编码。。。tq对我的帮助…我将添加删除功能,但数据库工作实际上是另一个问题。这个网站是为那些在问题上陷入困境的人而设的,你需要先尝试一下,然后展示你陷入困境的地方。否则你的问题会像这个一样被否决。有很多数据库教程,特别是针对php的。而php.net帮助/参考是最好的帮助/参考之一。我也很感谢你的支持,因为我说过这个网站是用来指导的,不是,请做我的工作。我已经添加了删除行功能
<!DOCTYPE html>
<html>
<head>
<title>Equipment</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var rows = 0;
function addMoreEquipment() {
rows++;
var options = [{ name: "Item 1", value: "1" }, { name: "Item 2", value: "2" }, { name: "Item 3", value: "3" }];
var row = $("<tr id='row"+ rows +"'><td><select id='equipment" + rows + "'></select></td><td><a href='#' onclick='removeRow(\"row" + rows + "\")'>Remove</a></td></tr>")
$("#equipment").append(row);
for (var i = 0; i < options.length; i++)
$("#equipment" + rows).append(new Option(options[i].name, options[i].value));
}
function removeRow(id) {
$("#" + id).remove();
}
$(document).ready(function() {
addMoreEquipment();
});
</script>
</head>
<body>
<form>
<table border="1" id="equipment">
<tr>
<td>Kod Peralatan</td>
<td>Nama Peralatan</td>
</tr>
</table>
<div style="text-align: right">
<input type="button" onclick="addMoreEquipment()" value="Add Row">
</div>
</form>
</body>
</html>