Question

我已经对两个值进行了硬编码，这两个值在具有在线状态的一个图标上显示一个绿色图标，而在一个处于脱机状态的图标上显示一个红色图标。现在，我希望它在调用函数时自动在表中添加绿色图标。

<div class="col-md-8">
          <table class="table table-bordered table striped " id="thinker_table" >
          <thead class="thead-dark">
              <tr>
                <th>Thinker Name</th>
                <th>MAC Address</th>
                <th>Status</th>
                <th>Indicator</th>
                <th>Show Routines</th>
                <th>Show Devices</th>
                </thead>


              </tr>
                <td>IPLConference Room</td>
                <td>XXXXXXXXXXXXX</td>
                <td >Online</td>
                <td>
                <div class="led-green"></div>
                <td> <input type="button"  value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>             
                <td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>   
                <tr>
                <td>Host_34F60E </td>
                <td>XXXXXXXXXX</td>
                <td >Offline</td>
                <td>
                <div class="led-red"></div>

                </td>

                <tfoot >
              <tr>
                <th>Thinker Name</th>
                <th>MAC Address</th>
                <th>Status</th>
                </tfoot >
          </table>
        </div>

</div>

</div>

这是我的JavaScript，在即时通讯下面在表格中显示结果。表格应该在状态= 1的位置上显示绿色图标。由于我的情况是如果状态= 1，因此我应该在所有表格行上获得绿色图标。

$(document).ready(function(){
  $.getJSON("test.json", function(data){
     var thinker_data = '';
     $.each(data.data, function(key, value){
      if(value.status == "1")
      {
        thinker_data += '<tr>';
        thinker_data += '<td>'+value.name+'</td>';
        thinker_data += '<td>'+value.mac+'</td>';
        thinker_data += '<td>'+value.status+ '</td>';
        thinker_data += '</tr>';   
      }

     });
     $('#thinker_table').append(thinker_data);

    }); 
  });

  </script>

答案是有帮助的，但是现在我得到了这样的图标

还要如何在表格中同时添加两个按钮？

Answer 1

我不太确定我是否理解这个问题，但是从我阅读的内容来看，如果用户的状态为= 1，则要显示一个绿色圆圈。然后您可以从json文件中获取该信息。

好吧，您需要先在CSS中创建圆圈！

Css：

.online {
  height: 25px;
  width: 25px;
  background:green;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}
.offline {
  height: 25px;
  width: 25px;
  background:red;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

然后，当您创建新行时，您对想要的列具有“在线”类：

 $.each(data.data, function(key, value){
  if(value.status == "1")
  {
    thinker_data += '<tr>';
    thinker_data += '<td>'+value.name+'</td>';
    thinker_data += '<td>'+value.mac+'</td>';
    thinker_data += '<td class="online"></td>';
    thinker_data += '<td></td>' //to make the "Indicator" column space
    thinker_data += '<td> <input type="button" value="Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>'
    thinker_data += '</tr>';   
  }

 });

请注意，由于无法访问“ test.json”文件，因此创建了示例输入。

查看JSFiddle中的示例。

如果您也不想为状态= 0圈红色，请使用离线课程！

$(document).ready(function() {

  var thinker_data = '';
  let data = {
    "data": [{
      "name": "text",
      "mac": "SOMETHIN5239321",
      "status": "1"
    }, {
      "name": "tex2t",
      "mac": "S23THIN5239321",
      "status": "1"
    }]
  };
  $.each(data.data, function(key, value) {
    if (value.status == "1") {
      thinker_data += '<tr>';
      thinker_data += '<td>' + value.name + '</td>';
      thinker_data += '<td>' + value.mac + '</td>';
      thinker_data += '<td class="online"></td>';
      thinker_data += '<td></td>' //to make the "Indicator" column space
      thinker_data += '<td> <input type="button" value=\Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>';
      thinker_data += '</tr>';
    }

  });
  $('#thinker_table').append(thinker_data);
});

.online {
  height: 25px;
  width: 25px;
  background: green;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

.offline {
  height: 25px;
  width: 25px;
  background: red;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-8">
  <table class="table table-bordered table striped " id="thinker_table">
    <thead class="thead-dark">
      <tr>
        <th>Thinker Name</th>
        <th>MAC Address</th>
        <th>Status</th>
        <th>Indicator</th>
        <th>Show Routines</th>
        <th>Show Devices</th>


      </tr>
    </thead>
    <td>IPLConference Room</td>
    <td>XXXXXXXXXXXXX</td>
    <td>Online</td>
    <td>
      <div class="led-green"></div>
      <td> <input type="button" value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
      <td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
      <tr>
        <td>Host_34F60E </td>
        <td>XXXXXXXXXX</td>
        <td>Offline</td>
        <td>
          <div class="led-red"></div>

        </td>

        <tfoot>
          <tr>
            <th>Thinker Name</th>
            <th>MAC Address</th>
            <th>Status</th>
        </tfoot>
  </table>
</div>

编辑： 我已经编辑了代码和代码段，以在每一列中重复您的按钮。我认为这不是最佳解决方案，但是您对目标是什么/环境是不是很清楚。

Answer 2

在这个问题中，我并没有完全遵循事件的链条以及您现在的位置，但是从我的收集中，您想知道如何使用有效的函数调用onClick将按钮添加到表中？ / p>

我更喜欢在javascript中写html并插入变量时使用模板字符串。看起来很干净

df = df.File_Name.iloc[df[~df.File_Name.str.contains('NaN')].index].str.split('.', expand=True)
df.iloc[:,1] = df.iloc[:,1].str.lower()
df = df[0] + '.' + df[1]

自动将div类CSS添加到javascript函数

2 个答案: