如何在innerHTML内联css场景中使用Javascript?

时间:2016-12-21 01:46:19

标签: javascript php html css

我是html5和php的新手。我想知道如何在我编写代码的情况下使用javascript。

我在HTML表格中输出数据库数据。我希望最后一个输出更多的权利。但是如果我使用内联css样式,我会得到一个解析错误:

我的代码:

def fixed_size_repeated_combos(n)
  [*0..9, *'a'..'z'].repeated_combination(n).map(&:join)
end

def all_size_repeated_combos(n)
  (1..n).flat_map { |i| fixed_size_repeated_combos(i) }
end

all_size_repeated_combos(2)
  #=> ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d",
  #    "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
  #    "s", "t", "u", "v", "w", "x", "y", "z", "00", "01", "02", "03", "04",
  #    "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f",
  #    ...
  #    "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "2g", "2h", "2i",
  #    ...
  #    "ww", "wx", "wy", "wz", "xx", "xy", "xz", "yy", "yz", "zz"] 

all_size_repeated_combos(1).size #=> 36 
all_size_repeated_combos(2).size #=> 702 
all_size_repeated_combos(3).size #=> 9138 
all_size_repeated_combos(4).size #=> 91389 
all_size_repeated_combos(5).size #=> 749397 

根据这个逻辑,我的目标是改变最后<table class="scroll"> <thead style="background-color: #99E1D9; color: #705D56;"> <tr> <th>ID</th> <th>Name</th> <th>Last Update</th> <th style="padding-left: 30%;">Status</th> </tr> </thead> <tbody id="hoverTable"> <?php $connection = mysql_connect('localhost', 'root', ''); mysql_select_db('patientdb'); $query = "SELECT id, name, date, status FROM clients"; $result = mysql_query($query); while($row = mysql_fetch_array($result)){ //looping through results echo "<tr> <td>" . $row['id'] . "</td> <td>" . $row['name'] . "</td> <td>" . $row['date'] . "</td> <td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> //my question is regarding this line!!!! </tr>"; //$row['index'] the index here is a field name } mysql_close(); ?> </tbody> </table> 输出的颜色,具体取决于我的数据库数据:

<td>

****我目前如何使用JS?****

编辑:尝试解决方案

 if (x > 60) {
   echo: "orange output"; 
}elseif (x >50) {
  echo: "red output";
}else{
 echo: "green output";
}

表格代码

<script>
    $('#hoverTable td').css('background-color',function(){
        var x = DATA FROM MY DATABASE;
            if (x > 50) {
            echo: "orange output"; 
            }elseif (x >60) {
            echo: "red output";
            }else{
            echo: "green output";
            }
    });
  </script>

3 个答案:

答案 0 :(得分:0)

你不能在PHP中断行。使用此:

NSScrollView

您需要连接每一行的末尾,或使用heredoc

答案 1 :(得分:0)

直截了当,如果你正在使用jQuery。

$('#hoverTable td:last-child').css('background-color',function(){
    var x = /*your target argument*/;
    if(x > 50){return 'orange '};
});

答案 2 :(得分:0)

你好如果你想在php中使用并且状态是最后一个“td”代码可以是这样的:

while($row = mysql_fetch_array($result)){   
  $statusClass = 'green output';

  if($row['status'] > 60){
      $statusClass = 'red output';
  }else if($row['status'] > 50){
      $statusClass = 'orange output';
  }

  echo '<tr>
  <td>' . $row["id"] . '</td>
  <td>' . $row["name"] . '</td>
  <td>' . $row["date"] . '</td>
  <td class="fa fa-circle '.$statusClass.'" style="color: grey; margin-left: 30%;"></td>
</tr>'
}

请确保您在第一名的条件数最多,因为如果您使用此代码

if (x > 50) {
   echo: "orange output"; 
}elseif (x >60) {
   echo: "red output";
}else{
   echo: "green output";
}

且x为65,它返回“橙色输出”而不是“红色输出”,因为第一个语句为真,x大于50

使用jquery是最简单的解决方案。上面的注释,仅适用于表而不是选择器“table”的id

$("#hoverTable td")...