首页 > 解决方案 > 使用 JQuery 动态增加 td id

问题描述

如何id="Selected_Device"使用jQuery在下面的代码中为td按序列顺序提供动态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;");


                 }


             }
        }

     }

 );

}

标签: jqueryruby-on-rails

解决方案


我会做这样的事情:

#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 %>");

推荐阅读