0
私はHTMLテーブルの挿入、削除、追加行を処理するJavascriptページで作業しています。私は、フォームの行の値を変更するedit_row（）関数を作成しています.Ajaxを使用してsave_row（）関数を使用してそれらを保存するとします。 Platformという名前の列には、1,2,3、および4の4つの値しか指定できませんでした。入力の検証が容易なので、ドロップダウンを使用することにしました。そのため、ユーザーは1 2 3以外の値を挿入しません。 4.私はinnerHTMLの中にドロップダウン用のHTMLを置こうとしましたが、変わったように見えますし、JavaScriptにドロップダウンを入れる他の方法があるのでしょうか？getelementbyIDのinnerHTMLにドロップダウンを入れてください
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>
私は私のコードは本当に原始的かもしれません知っているので、私は提案を見たいのですがここで はedit_row（）のコードでありますそれを改善する方法やJavascriptで行を編集する別の方法。
さてあなたは、変数にものを保存し、クエリを繰り返し...例ように見える： 'companyname'は'のdocument.getElementById（ "名前" + id）を含んでいる.innerHTML'しかし、あなたは単に変数にアクセスするのではなく、クエリを再度使用します...関連するHTMLをあなたのjavascriptに含めて、あなたが経験している問題を説明することができますか？* "よりも具体的ですが、正しくinnerHTMLに配置する "*ありがとうございます。 – NewToJS
innerHTMLの部分を変数に入れるだけですか？ – ProPall