我有一个HTML表，它从MySQL数据库和表单中加载信息，以添加，更新和加载该tabla的选定行。隐藏此表的某些行以使表格和表单适合HTML文档。
当选择或单击某行时，表单中的字段会加载包含在表格的可见行和不可见行中的信息，但我不知道该怎么做的是将输入类型设置为radio和checkbox为检查。我的意思是，如果一行在隐藏列中有一个值3＆＃34;状态＆＃34;，我该怎么做才能将无线电输入设置为已选中，其中＆＃34; Widower＆＃34;在形式。另外，如果某些复选框为真（或值1），如何将它们设置为正确检查？ 有什么想法吗？
SAMPLE OF HTML TABLE
+----+---------+---------+---------+-----+--------+----------+
| id | Name | L-name | Month | Day | Status | Category |
+----+---------+---------+---------+-----+--------+----------+
| 1 | Luis | Lopez | January | 7 | 1 | 3 |
| 2 | Carlos | Cooper | March | 12 | 3 | 1 |
| 3 | Ana | Snow | December| 3 | 2 | 1 |
+----+---------+---------+---------+-----+--------+----------+
我对代码进行了一些总结，但是它有效，但脚本中需要无线电和复选框：
<!--Here's the form-->
<div class="fields">
<form action="" method="POST">
<fieldset>
<legend>Personal Information: </legend>
Name: <input type="text" required name="nombre" id="name"><br>
Last Name: <input type="text" required name="apellido" id="l-name"><br>
<label>Birthday: </label>
<select name="mes" id="month">
<option value="">Choose month</option>
<option value="January ">January </option>
<option value="February ">February </option>
<!--And so on till December-->
</select>
Day: <input type="number" name="dia" min="1" max="31" value="1" id="day"><br>
Status:<input type="radio" name="estado" value="1" id="stage" checked> Single
<input type="radio" name="estado" value="2"> Married
<input type="radio" name="estado" value="3"> Widower
<input type="radio" name="estado" value="4"> Divorced<br><br>
<fieldset>
<legend>Category:</legend>
<input type="radio" name="categoria" value="1" id="tag"> Gentleman
<input type="radio" name="categoria" value="2" id="tag"> Lady
<input type="radio" name="categoria" value="3" id="tag"> young
<input type="radio" name="categoria" value="4" id="tag"> Child<br>
</fieldset>
</fieldset>
<fieldset>
<legend>Other Information: </legend>
Available:
<input type="radio" name="yes" value="1">Yes
<input type="radio" name="no" value="0">No<br><br>
<fieldset>
<legend>Skill:</legend>
<input type="checkbox" name="skill" value="1"> HTML
<input type="checkbox" name="skill" value="2"> JS
<input type="checkbox" name="skill" value="3"> Python
<input type="checkbox" name="skill" value="4"> JAVA
</fieldset>
<input type="reset" value="Reset">
<input type="submit" value="Update">
<input type="submit" name="send" value="Agregar">
</fieldset>
</form>
</div> <!--End field-->
<!--Here's the form-->
<div class="tabla">
<table id="table">
<thead>
<th style="display:none";>id</th>
<th>Name</th>
<th>Last name</th>
<th style="display:none";>Other</th>
<th style="display:none";>Other</th>
</thead>
<tbody>
<?php while($user = mysqli_fetch_array($datos)){ ?>
<tr>
<td style="display:none";><?php echo $user['id']; ?></td>
<td><?php echo $user['nombre']; ?></td>
<td><?php echo $user['apellido']; ?></td>
<td style="display:none";><?php echo $user['mes']; ?></td>
<td style="display:none";><?php echo $user['dia']; ?></td>
<td style="display:none";><?php echo $user['estado']; ?></td>
<td style="display:none";><?php echo $user['categoria']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div> <!--End tabla-->
<!--JS to load row information to form using id-->
<script>
var table = document.getElementById('table'),rIndex;
for (var i = 1; i < table.rows.length; i++){
table.rows[i].onclick = function(){
rIndex = this.rowsIndex;
document.getElementById("name").value = this.cells[1].innerHTML;
document.getElementById("l-name").value = this.cells[2].innerHTML;
document.getElementById("month").value = this.cells[3].innerHTML;
document.getElementById("day").value = this.cells[4].innerHTML;
document.getElementById("stage").value = this.cells[5].innerHTML;
document.getElementById("tag").value = this.cells[6].innerHTML;
};
}
</script>
我还尝试了一些我已经创建了一些MySQL行来保存名为skill1，skill2，skill3等技能的东西，但没有成功：
<!--radioboxes skills-->
<input type="checkbox" id="php" value="php"> PHP
<input type="checkbox" id="python" value="python"> PYTHON
<input type="checkbox" id="html" value="html"> HTML
<input type="checkbox" id="js" value="js"> JS
<!--hidden rows of the table that load the MySQL data-->
<td style="display:none";><?php echo $user['php']; ?></td>
<td style="display:none";><?php echo $user['python']; ?></td>
<td style="display:none";><?php echo $user['html']; ?></td>
<td style="display:none";><?php echo $user['js']; ?></td>
<!--js code-->
....
document.getElementById("php" + this.cells[4].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("python" + this.cells[5].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("html" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("js" + this.cells[7].innerHTML.trim().toLowerCase()).checked = true;
答案 0 :(得分：0)
id属性应该是唯一的。有四个input元素具有相同的id，所以这是错误的：
<input type="radio" name="categoria" value="1" id="tag"> Gentleman
<input type="radio" name="categoria" value="2" id="tag"> Lady
<input type="radio" name="categoria" value="3" id="tag"> young
<input type="radio" name="categoria" value="4" id="tag"> Child
我假设<?php echo $user['categoria']; ?>从已知的值列表中计算出一些字符串值，因此我建议以这种方式更改id：
<input type="radio" name="categoria" value="1" id="tag_gentleman"> Gentleman
<input type="radio" name="categoria" value="2" id="tag_lady"> Lady
<input type="radio" name="categoria" value="3" id="tag_young"> young
<input type="radio" name="categoria" value="4" id="tag_child"> Child
然后你可以改变这个JS代码：
document.getElementById("tag").value = this.cells[6].innerHTML;
进入这个：
document.getElementById("tag_" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;
这应该针对并设置适当的无线电输入。您可以这种方式设置其他收音机和复选框输入。此外，您可能希望清除所有复选框的状态，然后再将其设置为另一行。
编辑：
我已对上面的代码进行了更正：
1.固定trim函数 - 我用PHP方式而不是JS方式使用它;
2.添加toLowerCase并将所有id重命名为小写。
根据您在PasteBin中的示例有working example in jsFiddle。
编辑2：
Working example in jsFiddle将多个值列表翻译为复选框。