如何在html5中突出显示/更改表格中特定单词的颜色?

时间:2017-10-16 19:18:21

标签: html5 kdb

如果有表,则最后一列称为结果。 我想要突出显示有"失败"。

的所有单元格/文字

我该怎么做?

我需要使用带有kdb表的html5。

目前我的电子邮件功能是

htmlMailBody:{[emailadd;subject;message]
cmd:"echo \"",message, "\" | mutt -e  \"my_hdr 
From:abc@gmail.com\" -e \"my_hdr Content-Type: 
text/html\" ",emailadd, " -s \"",subject,"\"";
sent:@[{system x;1b};cmd;{.log.error"Failure sending email. Reason: ",x;0b}];
 if[sent; .log.info "Sent email to ",emailadd ];
};



mailRCP:bbc.gmail.com



htmlMailBody[mailRCP ;"health check";(,/)("<h2>SOD CHECKS<hr /></h2>";"<br />";markup[result];"<br />")];

这没有用。如果用kdb表替换markup [result],它将起作用。

4 个答案:

答案 0 :(得分:2)

&#13;
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px;">
<div class="container">
 
  <div class="alert alert-success alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Success !!</strong> This Text When Success !!
  </div>

  <div class="alert alert-danger alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Failed !!</strong> This Text When Failed !!
  </div>
</div>

</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

将结果作为HTML5 data-属性添加到每个单元格:

&#13;
&#13;
.results td[data-status="Failed"] {
    color: red;
}
&#13;
<table class="results">
    <tr>
        <th>Test Name</th>
        <th>Result</th>
    </tr>
    <tr>
        <td>Test 1</td>
        <td data-status="Passed">Passed</td>
    </tr>
    <tr>
        <td>Test 2</td>
        <td data-status="Failed">Failed</td>
    </tr>
    <tr>
        <td>Test 3</td>
        <td data-status="Passed">Passed</td>
    </tr>
</table>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

要直接从q标记HTML表格,请使用.h namespace中的标记功能。

让您的表格为t

q)t
a  b  c  d  result
-------------------
94 66 8  82 success
8  24 62 47 failed
97 60 95 26 success
52 69 59 93 success

为HTML at元素创建相应的td个属性表。从空字典开始,没有属性。空字典是()!()

q)show at:flip (cols t)! (count each(cols t;t))#enlist ()!()
a     b     c     d     result
------------------------------
()!() ()!() ()!() ()!() ()!()
()!() ()!() ()!() ()!() ()!()
()!() ()!() ()!() ()!() ()!()
()!() ()!() ()!() ()!() ()!()

根据result的{​​{1}}列更新at的{​​{1}}列。

result

我们可以使用.h.htac使用属性词典标记表格单元格。首先将表格单元格作为字符串:

t

别介意他们被翻过来了。现在来自q)f:t[`result]=`failed q)update result:([]color:(sum f)#enlist"red")from `at where f q)at a b c d result ---------------------------------------- ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() (,`color)!,"red" ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() 的词典也被翻转了。

q)string t cols t
"94"      ,"8"     "97"      "52"
"66"      "24"     "60"      "69"
,"8"      "62"     "95"      "59"
"82"      "47"     "26"      "93"
"success" "failed" "success" "success"

我们可以将它们分别用作at的第二个和第一个参数。 each-both adverb将遍历相应的行,但我们需要相应的单元格,因此q)at cols t ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() ()!() (,`color)!,"red" ()!() ()!() 将在行内的单元格内进行迭代。

.h.htac

函数.h.htac''汇总了HTML q).h.htac''[`td;at cols t;string t cols t] "<td>94</td>" "<td>8</td>" "<td>97</td>" "<td>52.. "<td>66</td>" "<td>24</td>" "<td>60</td>" "<td>69.. "<td>8</td>" "<td>62</td>" "<td>95</td>" "<td>59.. "<td>82</td>" "<td>47</td>" "<td>26</td>" "<td>93.. "<td>success</td>" "<td color=\"red\">failed</td>" "<td>success</td>" "<td>su.. 元素:

markup

使用属性词典表是一种强大的技术,可以适应各种突出显示,或为客户端脚本提供ID。

答案 3 :(得分:1)

你可以通过jQuery来做到这一点。见下面的代码。希望它会奏效。如果您遇到任何jQuery错误,请将所有$替换为jQuery。并使用带有result_text类的html元素绑定结果文本。

HTML

<td><div class='result_text'>Failed</div></td>
<td><div class='result_text'>Success</div></td>
<td><div class='result_text'>Failed</div></td>

$(".result_text").each(function() {
   if($(this).text()=='Failed'){
      $(this).parent().addClass('bg-danger');
   }else{
       $(this).parent().addClass('bg-success');
   }
})