我做了通过 jQuery 在 HTML 中添加行的实际过程，但它似乎不起作用。你能提供一个解决方案吗？我怎么解决这个问题？ “添加行”按钮不起作用，为什么？我尝试了很多方法但都失败了。谁能帮我？ 我也用 JavaScript 尝试过，但得到了相同的结果。
$(document).ready(function() {
$(".addRow").click(function() {
$('table').append("<tr>" +
"<td align="
center "><input type="
text " name="
id_country " value="
<?php echo $row["id_country"];?>
"><br>" +
"</td>" +
"<td><input type="
text " name="
name " value="
<?php echo $row["name"];?>
"><br>" +
"</td>" +
"<td><input type="
text " name="
codes " value="
<?php echo $row["codes"];?>
"><br>" +
"</td>" +
"<td><input type="
text " name="
types " value="
<?php echo $row["types"];?>
"><br>" +
"</td>" +
"<td><input type="
text " name="
t_code " value="
<?php echo $row["t_code"];?>
"><br>" +
"</td>
"<td><input type="
text " name="
range_name " value="
<?php echo $row["range_name"];?>
"><br>" +
"</td>
"<td align="
center "><input name="
usubmit " type="
submit " value="
Update " /></td>" +
"<td align="
center "><input name="
dsubmit " type="
submit " value="
Delete " /></td>" +
"</tr>"
);
});
}); <
/script><link rel="stylesheet" href="css/style.css" /><html>
<head>
<meta charset="utf-8">
<title>View Records</title>
</head>
<body>
<div class="form">
<p><a href="input_auth/index.php">Home</a> | <a href="insert.php">Insert New Record</a> | <a href="input_auth/in_out.php">Logout</a></p>
<h2>View Records</h2>
</div>
<table width="100%" border="1" id="table" style="border-collapse:collapse;">
<thead>
<tr>
<th><strong>Id_country</strong></th>
<th><strong>Name</strong></th>
<th><strong>codes</strong></th>
<th><strong>Medium</strong></th>
<th><strong>Medium_code</strong></th>
<th><strong>Class</strong></th>
<th><strong>Edit</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
<tbody>
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1" />
<tr>
<td align="center"><input type="text" name="id_country" value="<?php echo $row[" id_country "];?>"><br>
</td>
<td><input type="text" name="name" value="<?php echo $row[" name "];?>"><br>
</td>
<td><input type="text" name="codes" value="<?php echo $row[" codes "];?>"><br>
</td>
<td><input type="text" name="types" value="<?php echo $row[" types "];?>"><br>
</td>
<td><input type="text" name="t_code" value="<?php echo $row[" t_code "];?>"><br>
</td>
<td><input type="text" name="range_name" value="<?php echo $row[" range_name "];?>"><br>
</td>
<td align="center"><input name="usubmit" type="submit" value="Update" /></td>
<td align="center"><input name="dsubmit" type="submit" value="Delete" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"> <input type="button" name="asubmit" class="addRow" value="Add Row"></td>
</tr>
</form>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>最佳答案
这里的问题是你用 " 括住一个字符串。但该字符串有多个 " 实例其中(例如 "<td align="center">..." )。因此，当 javascript 解析器评估该行时，它将决定字符串在第二个 " 处结束。 ，之后 = 。所以对于解析器来说，字符串是 "<td align="并且在下一个字符串开始之前有一个无效的标记中心)。所以整个表达式对于 javascript 来说是困惑的。
解决方案是替换 " 的所有字符串内实例与 '像这样:
$(document).ready(function() {
$(".addRow").click(function() {
$('table').append("<tr>" +
"<td align='center'><input type='text' name='id_country' value='<?php echo $row['id_country'];?>'><br>" +"</td>" +
"<td><input type='text ' name='name ' value=<?php echo $row['name'];?>'><br>" +"</td>" +
"<td><input type='text ' name='codes ' value='<?php echo $row['codes'];?>'><br>" +"</td>" +
"<td><input type='text ' name='types ' value='<?php echo $row['types'];?>'><br>" +"</td>" +
"<td><input type='text ' name='t_code ' value='<?php echo $row['t_code';?>'><br>" +"</td>" +
"<td><input type='text ' name='range_name ' value='<?php echo $row['range_name'];?>'><br>" +"</td>" +
"<td align='center '><input name='usubmit ' type='submit ' value='Update ' /></td>" +
"<td align='center '><input name='dsubmit ' type='submit ' value='Delete ' /></td>" +
"</tr>"
);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" border="1" id="table" style="border-collapse:collapse;">
<thead>
<tr>
<th><strong>Id_country</strong></th>
<th><strong>Name</strong></th>
<th><strong>codes</strong></th>
<th><strong>Medium</strong></th>
<th><strong>Medium_code</strong></th>
<th><strong>Class</strong></th>
<th><strong>Edit</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
<tbody>
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1"/>
<tr>
<td align="center"><input type="text" name="id_country" value="<?php echo $row[" id_country "];?>"><br>
</td>
<td><input type="text" name="name" value="<?php echo $row[" name "];?>"><br>
</td>
<td><input type="text" name="codes" value="<?php echo $row[" codes "];?>"><br>
</td>
<td><input type="text" name="types" value="<?php echo $row[" types "];?>"><br>
</td>
<td><input type="text" name="t_code" value="<?php echo $row[" t_code "];?>"><br>
</td>
<td><input type="text" name="range_name" value="<?php echo $row[" range_name "];?>"><br>
</td>
<td align="center"><input name="usubmit" type="submit" value="Update"/></td>
<td align="center"><input name="dsubmit" type="submit" value="Delete"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"><input type="button" name="asubmit" class="addRow" value="Add Row"></td>
</tr>
</form>
</tbody>
</table>或者，您还可以:
- 使用
\"作为字符串内的引号。\将以下字符视为文字，即不表示字符串的开始或结束引号。 - 使用
'作为字符串的外部引号，并使用"原样用于字符串内引号。\"也有效，但不是必需的。但你不能使用相同的'对于字符串内引号，因为编译器会将其解释为字符串结尾。
关于php - 为什么我不能在这段代码中使用 jQuery 在 HTML 中添加一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56202623/