使用JQuery动态增加td id [英] Dynamically increment td id using JQuery

问题描述

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

How to give dynamic id values in serial order for td id="Selected_Device" in below code using jQuery?

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

I need to append each device status is on line or offline. I am getting different status values for each td but it is overridden because it has same id.I have included my ajax call.It will take mac length and check mac is online or offline and append result in respective column.Current code only overriding last status in each td cell.Because td id is same for all device.

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


                 }


             }
        }

     }

 );

}

推荐答案

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

I'd completely rewrite your js code in following way:

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 + "  ✅")
              } else if (result.includes("Off-line")) {
                nextColumnCell.append(result + "  ❗");
              }
            }
          }
        })

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

It gets list of elements with class macAddr (BTW. in template you have macaddres class) and for each element it gets its content $(macAddrEl).text().trim() and then it searches for element with class Selected_Device which has the same parent tr as current mac element $(macAddrEl).parent("tr").find(".Selected_Device")

您可以看到工作演示(省略了ajax部分，它只是显示为macaddres类的单元格的内容并用索引填充Selected_Device类的单元格

You can see working demo (omited ajax part, it just reads content of cells with macaddres class and fills cells with class Selected_Device with index)

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

PS. Since id has to be unique, you have to do

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

或者(如果您不使用它)可以删除ID.

or (if you don't use it) you can remove id.

这篇关于使用JQuery动态增加td id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！