javascript - 如何为将结果传递到另一个 td 的每一行制作一个复选框

Question

我正在尝试创建一个 html 表，其中每一行都有一个复选框。通过单击该复选框，它应该获取设备名称并在表格的第三个 td 中显示结果。但它正在更新第三个 td 的单行：

HTML：

<table id="MYtable" class="table table-bordered">
 <thead>
  <tr class="info">
  <th>CheckBox</th>
  <th>device name</th>
  <th> status</th>
  </tr>
 </thead>
 <tbody class="parameter_table">
  <% @my_devices.all.each do |device| %>
  <tr id="tr_rdkb_<%=device.id %>">
  <td >
  <input  type="checkbox" class="checkBox" name="checkBox[]" 
  onchange="clickedBox(this.name)">
  </td>
  <td class="deviceName" id="deviceName" style="word-break:break-all;">
   <%= device.deviceName%> 
   </td>
   <td class="Selected_Device" id="Selected_Device">
   <b  style="float: right; color: orange;">loading..</b>
   </td>
   </tr>
   <% end %>
  </tbody>
  </table>

Java脚本：

function webPaDeviceClickedBox(checkBoxName) {
  var values = new Array();
  var selected_device_id;
  var selected_device_name;

  $.each($("input[name='" + checkBoxName + "']:checked").closest("td")
    .next("td"), function () {
      values.push($(this).text().trim())
    });
  document.getElementById("deviceName").value = values.join("\n");
  selected_device_id = '#Selected_Device';
  selected_device_name = values.join("\n");
  $.ajax({
    method: "GET",
    dataType: "text",
    url: "getSelectedDeviceType",
    data: {
      mac: selected_device_name.trim(),
    },
    success: function (result) {
      $('#cover-spin').hide();
      if (result !== "") {
        if (result.includes("On-line")) {
          $(selected_device_id).html("");
          $(selected_device_id).append(result");
          } else if (result.includes("Off-line")) {
          $(selected_device_id).html("");
          $(selected_device_id).append(result");
         }
      } else {
        $(selected_device_id).html("");
        $(selected_device_id).append("Not Selected ");
      }
    }
  });
}

单击复选框我正在获取设备状态，但它会更新表格的第一行。如果我单击第三个复选框，它将获得第三个设备状态，但在表中它会更新第一个设备状态。

标签： javascript