如何 highlight/change 为 html5 中的 table 中的特定单词着色？

Question

如果有table，最后一列称为结果。我想突出显示所有具有 "Failed".

的 cell/text

我该怎么做？

我需要将 html5 与来自 kdb 的 table 一起使用。

目前我的邮件功能是这样的

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

这没有用。如果将标记 [result] 替换为 kdb table 它将起作用。

Answer 1

<!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>

Answer 2

您可以通过 jQuery 完成。请参见下面的代码。希望它会起作用。如果出现任何 jQuery 错误，请将所有 $ 替换为 jQuery。并使用 result_text class 的 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');
   }
})

Answer 3

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

.results td[data-status="Failed"] {
    color: red;
}

<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>

Answer 4

要直接从 q 标记 HTML table，请使用 .h namespace 中的标记函数。

让你的 table 成为 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 td 元素创建相应的 table at 属性。从空字典开始，没有属性。空字典是 ()!()。

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

根据t的result列更新at的result列。

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"
()!() ()!() ()!() ()!() ()!()
()!() ()!() ()!() ()!() ()!()

我们可以使用 .h.htac 来标记带有属性字典的 table 单元格。首先 table 单元格作为字符串：

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 的词典 – 也翻转了。

q)at cols t
()!() ()!()            ()!() ()!()
()!() ()!()            ()!() ()!()
()!() ()!()            ()!() ()!()
()!() ()!()            ()!() ()!()
()!() (,`color)!,"red" ()!() ()!()

我们可以将它们分别用作 .h.htac 的第二个和第一个参数。 each-both adverb 将遍历相应的行，但我们需要相应的单元格，因此 .h.htac'' 在行内的单元格内进行迭代。

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 组装 HTML table 元素：

markup:{[t]
  th:.h.htc[`tr;]raze .h.htc[`th;] each string cols t;                           / table head
  at:flip (cols t)! (count each(cols t;t))#enlist ()!();                         / empty attribute dictionaries
  f:t[`result]=`failed;
  at:update result:([]color:(sum f)#enlist"red")from at where f;                 / attributes for result failed
  tr:.h.htc[`tr;]each raze each flip .h.htac''[`td;at cols t;string t cols t];   / table rows
  .h.htc[`table;] .h.htc[`thead;th],.h.htc[`tbody;raze tr]
  }

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

如何 highlight/change 为 html5 中的 table 中的特定单词着色？

how to highlight/change color to particular word in a table in html5?

html

kdb