如何使用jquery动态添加包含输入标记的行

时间:2018-02-05 03:09:52

标签: javascript jquery html html5

我是这个领域的新手,并不知道在哪里问。

我想使用表格创建输入表单。但是,我不知道需要多少行,所以我想让这个表尽可能灵活,这样用户就可以根据需要添加更多行。

我试着看一下关于这类问题的教程和答案,但我仍然无法使我的代码工作。

所以,我希望你能帮我找到合适的代码。非常感谢。

这是我的代码:



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src = "jquery-3.3.1.min.js"></script>
		<script type = "text/javascript">
			$(document).ready(function(){
				$("#tambah").click(function () {
					var markup = "<tr><td><input type = "number" ID = "no" placeholder = "1"/></td><td><input type = "text" ID = "tahapan" placeholder = "Tahapan 1"/></td><td><input type = "text" ID = "suboutput" placeholder = "Sub-Output 1"/></td></tr>";
					$('#table2 tbody').append(markup);
				});
			});
		</script>
		<link rel = "stylesheet" type = "text/css" href = "prosesbisnis.css" media = "screen">
		<title>
			Proses Bisnis Kegiatan Pokok
		</title>
	</head>
	<body>
		<div class = "main">
			<h1>Proses Bisnis Kegiatan Pokok</h1>
			<br>
			<br>
				<table class = "table">
					<tbody>
						<tr>
							<td class = "col1">Nama Unit Eselon I</td>
							<td class = "col2"> : </td>
							<td class = "col3">
								x
							</td>
						</tr>
						<tr>
							<td class = "col1">Nama Satuan Kerja</td>
							<td class = "col2"> : </td>
							<td class = "col3">
								x
							</td>
						</tr>
						<tr>
							<td class = "col1">Nama Unit Organisasi</td>
							<td class = "col2"> : </td>
							<td class = "col3">
								x
							</td>
						</tr>
						<tr>
							<td class = "col1"><br></td>
							<td class = "col2"><br></td>
							<td class = "col3"><br></td>
						</tr>
						<tr>
							<td class = "col1">Nama Kegiatan</td>
							<td class = "col2"> : </td>
							<td class = "col3">
								x
							</td>
						</tr>
						<tr>
							<td class = "col1">Definisi Kegiatan</td>
							<td class = "col2"> : </td>
							<td class = "col3">
								x
							</td>
						</tr>
						<tr>
							<td class = "col1"><br></td>
							<td class = "col2"><br></td>
							<td class = "col3"><br></td>
						</tr>
						<tr>
							<td class = "col1"><br></td>
							<td class = "col2"><br></td>
							<td class = "col3"><br></td>
						</tr>
					</tbody>
				</table>
				<table id = "table2">
					<thead>
						<tr>
							<th>No</th>
							<th>Tahapan</th>
							<th>Sub-Output</th>
							<th></th>
						</tr>
					</thead>
					<br>
					<tbody>
						<tr>
							<td><br></td>
							<td><br></td>
						</tr>
						<tr>
							<td>
								<input type = "number" ID = "no" placeholder = "1"/>
							</td>
							<td>
								<input type = "text" ID = "tahapan" placeholder = "Tahapan 1"/>
							</td>
							<td>
								<input type = "text" ID = "suboutput" placeholder = "Sub-Output 1"/>
							</td>
						</tr>
					</tbody>
				</table>
				<p>
					<input type = "button" id = "tambah" value = "Tambah">
				</p>
				<br>
				<br>
				<br>
			<center>
				<a href = "">
				<div class = "submit">submit</div>
			</center>
				<br>
		</div>
	</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

双引号是脚本代码中的问题,要么将其更改为单引号,要么将def printer(arg1, arg2): for i in range(2): arg = 'arg{}'.format(str(i+1)) print(locals().get(arg), end="") printer('Hello', 'world') 替换为"

\"