如何使用 JavaScript 将选定的 HTML 表格行值显示到输入类型单选框和复选框中

Question

我有一个从 MySQL 数据库加载信息的 HTML 表和一个用于添加、更新和加载该表的选定行的表单。该表格的某些行被隐藏，以便将表格和表单放入 HTML 文档中。

When a row is selected or clicked the fields in form are loaded with information contained in the visible and invisible rows of the table, but what I don't know how to do is set the inputs type radio and checkbox as checked.我的意思是，如果一行在隐藏列“状态”中的值为 3，我该如何将无线电输入设置为已选中，其中“鳏夫”在表单中。另外，如果某些复选框为真（或值为 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;

Answer 1

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']; ?> 计算为已知值列表中的某个字符串值，因此我建议以这种方式更改ids：

<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并将ids全部重命名为小写。

working example in jsFiddle 基于您在 PasteBin 中的示例。

编辑 2：

Working example in jsFiddle 将多个值列表转换为复选框。