我正在处理一个Javascript页面，该页面处理HTML表中的插入，删除，添加行。我正在编写 edit_row(( 函数，它将行中的值更改为表单，并在通过 Ajax 的 save_row(( 函数保存它们时。 在名为"平台"的列中，只能有四个值 - 1、2、3 和 4。我决定使用它的下拉列表，因为它可以轻松验证输入，因此用户不会插入 1 2 3 和 4 以外的值。我尝试将下拉菜单中的HTML放在innerHTML中，但它看起来很奇怪，我想知道还有其他方法可以在JavaScript中放置下拉列表吗？ 下面是 edit_row(( 的代码：
function edit_row(id)
{
var companyname=document.getElementById("name"+id).innerHTML;
var destination=document.getElementById("destination"+id).innerHTML;
var time=document.getElementById("time"+id).innerHTML;
var platform=document.getElementById("destination"+id).innerHTML;
var date=document.getElementById("date"+id).innerHTML;
document.getElementById("name"+id).innerHTML="<input type='text' id='compname_text"+id+"' value='"+companyname+"'>";
document.getElementById("destination"+id).innerHTML="<input type='text' id='age_text"+id+"' value='"+destination+"'>";
document.getElementById("time"+id).innerHTML="<input type='time' id='time"+id+"' value='"+time+"'>";
document.getElementById("platform"+id).innerHTML="<form id='platform"+id+"' value='"+platform+"'><select><option value = '12'> 1 </option ><option value = > 2</option></select>";
document.getElementById("date"+id).innerHTML="<input type='date' id='date"+id+"' value='"+time+"'>";
document.getElementById("edit_button"+id).style.display="none";
document.getElementById("save_button"+id).style.display="block";
JS应该附带的HTML：
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Departures table for workers </title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div class="table" align="center">
<div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
<table border="1" align="center" width="700">
<thead>
<tr>
<th>ID</th>
<th>Train Company</th>
<th>Destination</th>
<th>Time</th>
<th>Platform</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><?php echo $row['id']?></td>
<td id="name"><?php echo $row['Traincompany'] ?></td>
<td id="destination"><?php echo $row['Destination'] ?></td>
<td id="time"><?php echo $row['Time'] ?></td>
<td id="platform"><?php echo $row['Platform'] ?></td>
<td id="date"><?php echo $row['Date'] ?></td>
<td>
<input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');">
<input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');">
<input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');">
</td>
</tr>
<?php endwhile ?>
<tr id="new_row">
<td>New ID will be given automatically</td>
<td><input type="text" id="new_Traincompany" placeholder="Company name"></td>
<td><input type="text" id="new_Destination" placeholder="Destination"></td>
<td><input type="time" id="new_time"></td>
<td align="center">
<select name = "Platform">
<option value = '1'> 1 </option >
<option value = '2'> 2</option >
<option value = '3'> 3</option >
<option value = '4'> 4 </option >
</select>
</td>
<td><input type="date" id="new_date" ></td>
<td><input type="button" value="Insert Row" onclick="insert_row();"></td>
</tr>
</tbody>
</table>
<p class="message">Logout from user<a href="logout.php">Logout</a>
</div>
</body>
</html>
我知道我的代码可能真的很原始，所以我想看看关于如何改进它的建议或通过 Javascript 编辑行的其他方法。
首先，正如@NewToJS提到的，一旦将这些变量分配给专用变量，您就不必再次调用 document.getElementById((.innerHTML。所以代码可以像这样简化：
function edit_row(id)
{
var companyname=document.getElementById("name"+id).innerHTML;
var destination=document.getElementById("destination"+id).innerHTML;
companyname="<input type='text' id='compname_text"+id+"' value='"+companyname+"'>";
destination="<input type='text' id='age_text"+id+"' value='"+destination+"'>";
...
然后，如果您不喜欢将所有代码插入innerHTML中，则可以编写一个专用函数来创建下拉列表并从main函数调用它。
function insertDropdown (quantity) {
var div = document.createElement('select');
div.setAttribute("name", "platform");
for (let i=0; i<quantity; i++) {
var option = document.createElement('option');
option.setAttribute("value", i)
option.innerHTML = "option " + i
div.appendChild(option)
}
document.getElementById('dropdown-container').appendChild(div)
}
确保为插入下拉列表的<td>分配了正确的 ID，并从主函数调用了该函数。
function insertDropdown(quantity) {
var div = document.createElement('select');
div.setAttribute("name", "platform");
for (let i=0; i<quantity; i++) {
var option = document.createElement('option');
option.setAttribute("value", i)
option.innerHTML = "option " + i
div.appendChild(option)
}
document.getElementById('dropdown-container').appendChild(div)
}
insertDropdown(3)<table>
<tr>
<td id="dropdown-container"></td>
</tr>
</table>