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

Question

我有一个 HTML 表，它从 MySQL 数据库加载信息，还有一个表单来添加、更新和加载该 tabla 的选定行。该表的某些行被隐藏，以便使表和表单适合 HTML 文档。

当选择或单击一行时，表单中的字段将加载表格的可见和不可见行中包含的信息，但我不知道该怎么做是将输入类型单选和复选框设置为选中。我的意思是，如果一行在隐藏列“状态”中的值为 3，我该如何将 radio 输入设置为选中状态，其中“鳏夫”在表单中。另外，如果某些复选框为 true(或值为 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']; ?>评估为已知值列表中的某个字符串值，因此我建议更改 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;

这应该瞄准并设置正确的 radio 输入。您可以用这种方式设置其他单选和复选框输入。此外，您可能希望在为另一行设置所有复选框之前清除所有复选框的状态。

编辑:

我对上面的代码进行了更正:1.已修复trim函数 - 我以 PHP 方式而不是 JS 方式使用它；2.添加toLowerCase并将全部重命名为id s 改为小写。

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

编辑2:

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