Question

我有一张桌子，上面有不同的单元格。在单元格中，有一个选项可以选择“确定”，“固定”或“不完整”。如果选中了INCOMPLETE单元格，则可以将该ID添加到数组中，但是我不确定如何在页面底部打印该数组。我觉得我必须要有一个按钮，单击该按钮后，它将在页面底部打印出所有ID，而不是能够自动执行此操作。



var all_checked = new Array();
  function add_checked(el) {
    all_checked.push(el.id);
  }
<form action="/action_page.php">
<table id="t01" width="1200" height="10" border="3">
  <tbody>
  <tr><th>DETAILS</th>
  <th>OK</th>
  <th>FIXED</th>
  <th>INCOMPLETE</th>
  <th>N/A</th>
  <th>NOTES</th>
  </tr>
  <tr>
  <td><b>MOTOR &amp; REDUCER-</b>Are correct and installed properly.</td>
  <td><input name="INS1" id="CHK22" onclick="ckChange(this)" type="checkbox"><br></form></td>
  <td><input name="INS1" id="CHK23" onclick="ckChange(this)" type="checkbox"><br></td>
  <td><input name="INS1" id="CHK24" onclick="ckChange(this)" type="checkbox"><br></td>
  <td><input name="INS1" id="CHK25" onclick="ckChange(this);add_checked(this)" type="checkbox"><br></td>
  <td width="15%">
    <textarea placeholder="Type notes and remarks." cols="55"></textarea>
  </td>
  </tr>
  
  <tr>
  <td><b>REDUCER LUBRICATION-</b>Reducer is filled with oil (Mobil SHC 634/ISO VG 460)(ISS 0.7).</td>
  <td><input name="INS2" id="CHK26" onclick="ckChange(this)" type="checkbox"><br></form></td>
  <td><input name="INS2" id="CHK27" onclick="ckChange(this)" type="checkbox"><br></td>
  <td><input name="INS2" id="CHK28" onclick="ckChange(this)" type="checkbox"><br></td>
  <td><input name="INS2" id="CHK29" onclick="ckChange(this);add_checked(this)" type="checkbox"><br></td>
  <td>
    <textarea placeholder="Type notes and remarks." cols="55"></textarea>
  </td>
  </tr>
</table>
</form>

Answer 1

没有足够的信息来解决问题。也许问题出在功能ckChange上。我唯一要提醒您的是，下面有两个不必要的“ form”标签。

<td><input name="INS1" id="CHK22" onclick="ckChange(this)" type="checkbox"><br></form></td>

<td><input name="INS2" id="CHK26" onclick="ckChange(this)" type="checkbox"><br></form></td>

Answer 2

我使用了不打扰的原则来添加事件监听器。

然后，我们抓取选中的元素并创建一个数组，以更新元素的innerHTML属性以显示结果。

//Get all checkboxes in the table
var targetCheckBoxes = document.querySelectorAll("#t01 input[type=checkbox]"); 

//Get our display element
var resultElement = document.querySelector("#results span");

//Method to get and display the checked elements
function displayChecked(){
  //Get Checked boxes;
  var checkedBoxes = document.querySelectorAll("#t01 input[type=checkbox]:checked"); 
  var ids = [];
  checkedBoxes.forEach(function(box){
    ids.push(box.id);
  });
  
  //Update result element
  resultElement.innerHTML = ids.join();
}

//Add Event LIstener to the check boxes
targetCheckBoxes.forEach(function(element){
  element.addEventListener("click",displayChecked, false);
})

<form action="/action_page.php">
  <table id="t01" width="1200" height="10" border="3">
    <tbody>
      <tr>
        <th>DETAILS</th>
        <th>OK</th>
        <th>FIXED</th>
        <th>INCOMPLETE</th>
        <th>N/A</th>
        <th>NOTES</th>
      </tr>
      <tr>
        <td><b>MOTOR &amp; REDUCER-</b>Are correct and installed properly.</td>
        <td><input name="INS1" id="CHK22" type="checkbox"></td>
        <td><input name="INS1" id="CHK23" type="checkbox"></td>
        <td><input name="INS1" id="CHK24" type="checkbox"></td>
        <td><input name="INS1" id="CHK25" type="checkbox">
        </td>
        <td width="15%">
          <textarea placeholder="Type notes and remarks." cols="55"></textarea>
        </td>
      </tr>

      <tr>
        <td><b>REDUCER LUBRICATION-</b>Reducer is filled with oil (Mobil SHC 634/ISO VG 460)(ISS 0.7).</td>
        <td><input name="INS2" id="CHK26" type="checkbox"></td>
        <td><input name="INS2" id="CHK27" type="checkbox"></td>
        <td><input name="INS2" id="CHK28" type="checkbox"></td>
        <td><input name="INS2" id="CHK29" type="checkbox"></td>
        <td>
          <textarea placeholder="Type notes and remarks." cols="55"></textarea>
        </td>
      </tr>
  </table>
</form>
<div id="results">Results : <span></span></div>

在旁注中，我已删除了您的<br>标签。您应该使用CSS，特别是填充或边距来提供空间。

如果选中了HTML框，请在页面底部显示该标签

2 个答案: