Question

如何在下面的代码中使用jQuery为td id="Selected_Device"依次提供动态ID值？

我需要添加在线或离线状态下每个设备的状态。我为每个td获取不同的状态值，但是由于具有相同的id而被覆盖。我已经包含了我的ajax调用。它将占用mac长度，并检查mac是在线还是离线，并将结果附加到相应的列中。当前代码仅覆盖最后一个每个td单元中的状态。因为所有设备的td id都相同。

    <td class="Selected_Device" id="Selected_Device">

HTML

<tbody class="parameter_table">
  <% @my_devices.all.each do |parameter| %>
  <tr id="tr_device_<%=parameter.id %>">
    <td >
      <input  type="checkbox" class="checkBox" name="checkBox_m[]" >
    </td>
    <td class="macaddres" style="word-break:break-all;">
      <%= parameter.mac_address%> 
    </td>
    <td class="Selected_Device" id="Selected_Device">
    </td>
  </tr>
  <% end %>
</tbody>

JS文件

function getDeviceType() {

   var selected_Device_Mac ;

 var selected_device_id = '';

         if ($('#PA').is(":visible")) {
         console.log("before")
         selected_Device_Mac = document.querySelectorAll(".macAddr");
         var k=selected_Device_Mac.length;
          selected_device_id = document.querySelectorAll(".Selected_Device");

  for (var i=0;i<k;i++){
 $.ajax({

         method: "GET",
         dataType: "text",
         url: "getDeviceStatus",
         data: {
             mac : selected_Device_Mac[i].innerText,
         },

         success: function(result) {
             if(result!==""){

                 if(result.includes("On-line")){
                    //$(selected_device_id).html("");
                    $(selected_device_id).append(result+"&nbsp;&nbsp;&#9989;");

                 }else if(result.includes("Off-line")){
                    // $(selected_device_id).html("");
                     $(selected_device_id).append(result+"&nbsp;&nbsp;&#10071;");


                 }


             }
        }

     }

 );

}

Answer 1

我会做这样的事情：

#in your view 
<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

#in your js.erb
selected_device_id = document.getElementById("#Selected_Device_<%= parameter.id %>");

Answer 2

我将通过以下方式完全重写您的js代码：

function getDeviceType() {

  if (!$('#PA').is(":visible")) {
    return;
  }

  $(".macAddr").each(function(index, macAddrEl) {
        $.ajax({

          method: "GET",
          dataType: "text",
          url: "getDeviceStatus",
          data: {
            mac: $(macAddrEl).text().trim(),
          },

          success: function(result) {
            if (result !== "") {
              var nextColumnCell = $(macAddrEl).parent("tr").find(".Selected_Device")

              if (result.includes("On-line")) {
                nextColumnCell.append(result + "&nbsp;&nbsp;&#9989;")
              } else if (result.includes("Off-line")) {
                nextColumnCell.append(result + "&nbsp;&nbsp;&#10071;");
              }
            }
          }
        })

它获取类macAddr的元素列表（顺便说一句，在模板中您拥有macaddres类），并且为每个元素获取其内容$(macAddrEl).text().trim()，然后搜索具有类的元素Selected_Device与当前mac元素tr具有相同的父项$(macAddrEl).parent("tr").find(".Selected_Device")

您会看到working demo（省略了ajax部分，它只读取macaddres类的单元格内容，并用索引填充Selected_Device类的单元格）

PS。由于ID必须是唯一的，因此您必须

<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

或者（如果您不使用它）可以删除ID。

使用JQuery动态增加td id

2 个答案: