前端表格下拉复选框代码

A：

以下是一个简单的前端表格下拉复选框的示例代码，包括HTML、CSS和JavaScript：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>
        <div class="dropdown">
          <button class="dropbtn">Select Country</button>
          <div class="dropdown-content">
            <label><input type="checkbox" value="USA">USA</label>
            <label><input type="checkbox" value="Canada">Canada</label>
            <label><input type="checkbox" value="Mexico">Mexico</label>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>
        <div class="dropdown">
          <button class="dropbtn">Select Country</button>
          <div class="dropdown-content">
            <label><input type="checkbox" value="USA">USA</label>
            <label><input type="checkbox" value="Canada">Canada</label>
            <label><input type="checkbox" value="Mexico">Mexico</label>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS代码：

/* Style the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 8px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

/* Style the dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

/* Style the checkboxes */
.dropdown-content label {
  display: block;
  margin-bottom: 8px;
}

/* Show the dropdown content when the button is clicked */
.show {
  display: block;
}

JavaScript代码：

// Get all dropdown buttons
var dropdowns = document.getElementsByClassName("dropdown");

// Loop through all dropdown buttons
for (var i = 0; i < dropdowns.length; i++) {
  var dropdown = dropdowns[i];

  // Add click event listener to dropdown button
  dropdown.getElementsByTagName("button")[0].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });

  // Add click event listener to checkboxes
  var checkboxes = dropdown.querySelectorAll(".dropdown-content input[type='checkbox']");
  for (var j = 0; j < checkboxes.length; j++) {
    checkboxes[j].addEventListener("click", function() {
      var selectedValues = [];
      var checkedBoxes = dropdown.querySelectorAll(".dropdown-content input[type='checkbox']:checked");
      for (var k = 0; k < checkedBoxes.length; k++) {
        selectedValues.push(checkedBoxes[k].value);
      }
      var dropdownButton = dropdown.getElementsByTagName("button")[0];
      if (selectedValues.length > 0) {
        dropdownButton.innerHTML = selectedValues.join(", ");
      } else {
        dropdownButton.innerHTML = "Select Country";
      }
    });
  }
}

以上代码使用了原生JavaScript实现下拉复选框的功能，可以适用于任何包含表格的网页。