PHP 表格单击按钮动态添加文本行的解决方案

javascript

2024-03-08 07:56:16

PHP表格中单击按钮添加文本行的动态解决方案

问题：

想象一下，你有一个车辆检查表，包含针对每项检查的“通过”、“警告”和“失败”按钮，以及一个“评论”按钮。在单击“评论”按钮时，你需要在同一行下方显示一行文本。此外，当单击“警告”或“失败”时，评论应该变为红色，因为此时评论是必需的。

解决方案：

1. 创建文本输入字段：

在每个检查行的下方，添加一个隐藏的文本输入字段，用于在单击“评论”按钮时显示文本行。

2. 添加事件侦听器：

为“评论”按钮添加一个事件侦听器，当单击按钮时触发。

3. 显示文本行：

在事件侦听器中，显示隐藏的文本输入字段以显示文本行。

4. 更改评论颜色：

如果单击了“警告”或“失败”按钮，使用 JavaScript 更改评论的颜色。

示例代码：

<tr>
  <td>
    <?php echo $checks['check_name']; ?> <br><br>

    <input type="radio" class="btn-check" name="btn[<?php echo $checks['id']; ?>]" id="btnpass[<?php echo $checks['id']; ?>]" value="Pass">
    <label class="btn rounded-pill btn-outline-success" for="btnpass[<?php echo $checks['id']; ?>]">Pass</label>&Tab;&Tab;

    <input type="radio" class="btn-check" name="btn[<?php echo $checks['id']; ?>]" id="btnwarning[<?php echo $checks['id']; ?>]" value="Warning">
    <label class="btn rounded-pill btn-outline-warning" for="btnwarning[<?php echo $checks['id']; ?>]">Warning</label>&Tab;&Tab;

    <input type="radio" class="btn-check" name="btn[<?php echo $checks['id']; ?>]" id="btnfail[<?php echo $checks['id']; ?>]" value="Fail">
    <label class="btn rounded-pill btn-outline-danger" for="btnfail[<?php echo $checks['id']; ?>]">Fail</label>&Tab;&Tab;

    <button type="button" name="comment[<?php echo $checks['id']; ?>]" id="comment[<?php echo $checks['id']; ?>]" class="btn btn-info" style="float: right"><img src="assets/comment.png" width="20px"></button>
  </td>
</tr>
<tr id="commentline[<?php echo $checks['id']; ?>]" class="hide">
  <td>
    <input type="text" id="comment-text[<?php echo $checks['id']; ?>]" placeholder="Enter comment">
  </td>
</tr>

// Get the comment buttons
const commentButtons = document.querySelectorAll("button[name^=comment]");

// Loop through the comment buttons
commentButtons.forEach(button => {
  // Add an event listener to each comment button
  button.addEventListener("click", () => {
    // Get the ID of the comment button
    const buttonId = button.id;

    // Get the corresponding comment line
    const commentLine = document.getElementById("commentline[" + buttonId.slice(7) + "]");

    // Toggle the visibility of the comment line
    commentLine.classList.toggle("show");
  });
});

// Get the radio buttons
const radioButtons = document.querySelectorAll("input[type=radio]");

// Loop through the radio buttons
radioButtons.forEach(radioButton => {
  // Add an event listener to each radio button
  radioButton.addEventListener("change", () => {
    // Get the value of the radio button
    const value = radioButton.value;

    // Get the corresponding comment line
    const commentLine = document.getElementById("commentline[" + radioButton.name.slice(4) + "]");

    // If the value is "Warning" or "Fail", change the color of the comment line to red
    if (value === "Warning" || value === "Fail") {
      commentLine.style.color = "red";
    } else {
      commentLine.style.color = "black";
    }
  });
});