将HTML表格中的单元格从简单文本更改为超链接。

huangapple
go评论122阅读模式
英文:

Changing cell in html table from simple text to hyperlink

问题

我正在进行一个简单的个人项目，以便在表格中展示一个 JSON 数组。这个表格包含："process name"（进程名称）、"file name"（文件名称）、"link"（链接）以及一个名为"is passed"（是否通过）的布尔标志。

主要问题是我想将链接下的单元格改为超链接，可以被点击，并引导我到其他路径。

当前表格状态：

将HTML表格中的单元格从简单文本更改为超链接。

附上 HTML 和 JS 代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>测试报告</title>
  5.     <style>
  6.         th, td, p, input, h3 {
  7.             font:15px 'Segoe UI';
  8.         }
  9.         table, th, td {
  10.             border: solid 1px #ddd;
  11.             border-collapse: collapse;
  12.             padding: 2px 3px;
  13.             text-align: center;
  14.         }
  15.         th {
  16.             font-weight:bold;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <p id='showData'></p>
  22. </body>
  24. <script>
  26. tableFromJson();
  28.     function tableFromJson() {
  29. 		// JSON 数据（您可以更改值以输出不同内容。）
  30.         var myFiles = 
  31. [
  32.   {
  33.     "process_name":"Process1",
  34.     "file_name":"file1",
  35.     "link":"/compared_text/Process1/file1.html",
  36.     is_passed:true
  37.   },
  38.   {
  39.     "process_name":"Process1",
  40.     "file_name":"file2",
  41.     "link":"/compared_text/Process1/file2.html",
  42.     is_passed:true
  43.   },
  44.   {
  45.     "process_name":"Process2",
  46.     "file_name":"file1",
  47.     "link":"/compared_text/Process2/file1.html",
  48.     is_passed:true
  49.   },
  50.   {
  51.     "process_name":"Process2",
  52.     "file_name":"file2",
  53.     "link":"/compared_text/Process2/file2.html",
  54.     is_passed:true
  55.   }
  56. ]
  58.         var col = [];
  59.         for (var i = 0; i < myFiles.length; i++) {
  60.             for (var key in myFiles[i]) {
  61.                 if (col.indexOf(key) === -1) {
  62.                     col.push(key);
  63.                 }
  64.             }
  65.         }
  67.         // 创建表格
  68.         var table = document.createElement("table");
  70.         // 使用上面提取的标头创建表格标题行
  71.         var tr = table.insertRow(-1);                   // 表格行
  73.         for (var i = 0; i < col.length; i++) {
  74.             var th = document.createElement("th");      // 表格标题
  75.             th.innerHTML = col[i];
  76.             tr.appendChild(th);
  77.         }
  79.         // 将 JSON 数据添加为行到表格中
  80.         for (var i = 0; i < myFiles.length; i++) {
  82.             tr = table.insertRow(-1);
  84.             for (var j = 0; j < col.length; j++) {
  85.                 var tabCell = tr.insertCell(-1);
  86.                 // 如果是链接列，创建超链接元素
  87.                 if (col[j] === "link") {
  88.                     var link = document.createElement("a");
  89.                     link.href = myFiles[i][col[j]];
  90.                     link.innerHTML = myFiles[i][col[j]];
  91.                     tabCell.appendChild(link);
  92.                 } else {
  93.                     tabCell.innerHTML = myFiles[i][col[j]];
  94.                 }
  95.             }
  96.         }
  98.         // 现在，将带有 JSON 数据的新创建表格添加到一个容器中
  99.         var divShowData = document.getElementById('showData');
  100.         divShowData.innerHTML = "";
  101.         divShowData.appendChild(table);
  102.         
  103.     }
  104.     
  105.     
  107. </script>
  108. </html>
英文:

Im working on a simple self-project in order to present a JSON Array in a table.
This table contains: "process name", "file name", "link" and a boolean flag named "is passed".
The main issue is that I would like to change the cells under link to be hyperlink and can be pressed and lead me to other path.

Current table status:

将HTML表格中的单元格从简单文本更改为超链接。

Attaching HTML & JS code:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;test report&lt;/title&gt;
  5. &lt;style&gt;
  6. th, td, p, input, h3 {
  7. font:15px &#39;Segoe UI&#39;;
  8. }
  9. table, th, td {
  10. border: solid 1px #ddd;
  11. border-collapse: collapse;
  12. padding: 2px 3px;
  13. text-align: center;
  14. }
  15. th {
  16. font-weight:bold;
  17. }
  18. &lt;/style&gt;
  19. &lt;/head&gt;
  20. &lt;body&gt;
  21. &lt;p id=&#39;showData&#39;&gt;&lt;/p&gt;
  22. &lt;/body&gt;
  23. &lt;script&gt;
  24. tableFromJson();
  25. function tableFromJson() {
  26. // the json data. (you can change the values for output.)
  27. var myFiles = 
  28. [
  29. {
  30. &quot;process_name&quot;:&quot;Process1&quot;,
  31. &quot;file_name&quot;:&quot;file1&quot;,
  32. &quot;link&quot;:&quot;/compared_text/Process1/file1.html&quot;,
  33. is_passed:true
  34. },
  35. {
  36. &quot;process_name&quot;:&quot;Process1&quot;,
  37. &quot;file_name&quot;:&quot;file2&quot;,
  38. &quot;link&quot;:&quot;/compared_text/Process1/file2.html&quot;,
  39. is_passed:true
  40. },
  41. {
  42. &quot;process_name&quot;:&quot;Process2&quot;,
  43. &quot;file_name&quot;:&quot;file1&quot;,
  44. &quot;link&quot;:&quot;/compared_text/Process2/file1.html&quot;,
  45. is_passed:true
  46. },
  47. {
  48. &quot;process_name&quot;:&quot;Process2&quot;,
  49. &quot;file_name&quot;:&quot;file2&quot;,
  50. &quot;link&quot;:&quot;/compared_text/Process2/file2.html&quot;,
  51. is_passed:true
  52. }
  53. ]
  54. var col = [];
  55. for (var i = 0; i &lt; myFiles.length; i++) {
  56. for (var key in myFiles[i]) {
  57. if (col.indexOf(key) === -1) {
  58. col.push(key);
  59. }
  60. }
  61. }
  62. // Create a table.
  63. var table = document.createElement(&quot;table&quot;);
  64. // Create table header row using the extracted headers above.
  65. var tr = table.insertRow(-1);                   // table row.
  66. for (var i = 0; i &lt; col.length; i++) {
  67. var th = document.createElement(&quot;th&quot;);      // table header.
  68. th.innerHTML = col[i];
  69. tr.appendChild(th);
  70. }
  71. // add json data to the table as rows.
  72. for (var i = 0; i &lt; myFiles.length; i++) {
  73. tr = table.insertRow(-1);
  74. for (var j = 0; j &lt; col.length; j++) {
  75. var tabCell = tr.insertCell(-1);
  76. tabCell.innerHTML = myFiles[i][col[j]];
  77. }
  78. }
  79. // Now, add the newly created table with json data, to a container.
  80. var divShowData = document.getElementById(&#39;showData&#39;);
  81. divShowData.innerHTML = &quot;&quot;;
  82. divShowData.appendChild(table);
  83. }
  84. &lt;/script&gt;
  85. &lt;/html&gt;

答案1

得分: 1

你可以像这样创建链接

我认为你应该将tabCell.innerHTML = myFiles[i][col[j]]; 替换为类似这样的内容（当你要添加链接时）：

  1. var a = document.createElement('a');
  2. a.title = "我的标题文本";
  3. a.href = "http://example.com";
  4. tabCell.appendChild(a);
英文:

You can create links like that

I think you should replace tabCell.innerHTML = myFiles[i][col[j]]; by something like that (when it is a link that you are about to add):

  1. var a = document.createElement(&#39;a&#39;);
  2. a.title = &quot;my title text&quot;;
  3. a.href = &quot;http://example.com&quot;;
  4. tabCell.appencChild(a);

答案2

得分: 0

  1. 你可以尝试类似这样的代码：

for (var i = 0; i < myFiles.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
if (j === 2) {
tabCell.innerHTML = <a href="${myFiles[i][col[j]]}">${myFiles[i][col[j]]}</a>;
} else {
tabCell.innerHTML = myFiles[i][col[j]];
}
}
}

  1. 它会检查是否为链接（在你的情况下，链接是 j=2），然后将其放入 `<a href=""></a>` 中。
英文:

You can try something like this:

  1. for (var i = 0; i &lt; myFiles.length; i++) {
  2. tr = table.insertRow(-1);
  3. for (var j = 0; j &lt; col.length; j++) {
  4. var tabCell = tr.insertCell(-1);
  5. if (j === 2) {
  6. tabCell.innerHTML = `&lt;a href=&quot;${myFiles[i][col[j]]}&quot;&gt;${myFiles[i][col[j]]}&lt;/a&gt;&quot;`;
  7. } else {
  8. tabCell.innerHTML = myFiles[i][col[j]];
  9. }
  10. }
  11. }

It check if it is a link (in your case links are J=2) and put in in &lt;a href=&quot;&gt;&lt;/a&gt;

答案3

得分: 0

你可以将数据添加部分更改如下。

  1. if (new String(myFiles[i][col[j]]).indexOf('.html') > -1) {
  2.     tabCell.innerHTML = '<a href="' + myFiles[i][col[j]] + '">点击查看详情</a>';
  3. } else {
  4.     tabCell.innerHTML = myFiles[i][col[j]];
  5. }
英文:

You can change the data adding part as follows.

  1. if(new String(myFiles[i][col[j]]).indexOf(&#39;.html&#39;)&gt;-1){
  2. tabCell.innerHTML = &#39;&lt;a href=&quot;&#39; + myFiles[i][col[j]] + &#39;&quot;&gt;Click For Details&lt;/a&gt;&#39;;
  3. }else{
  4. tabCell.innerHTML = myFiles[i][col[j]];
  5. }

答案4

得分: 0

  1. for (var j = 0; j < col.length; j++) {
  2.     var tabCell = tr.insertCell(-1);
  3.     let content = myFiles[i][col[j]];
  4.     tabCell.innerHTML = col[j] === 'link' ? 
  5.         `<a href="${content}">${content}</a>` : content;
  6. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>test report</title>
  5.     <style>
  6.         th, td, p, input, h3 {
  7.             font:15px 'Segoe UI';
  8.         }
  9.         table, th, td {
  10.             border: solid 1px #ddd;
  11.             border-collapse: collapse;
  12.             padding: 2px 3px;
  13.             text-align: center;
  14.         }
  15.         th {
  16.             font-weight:bold;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <p id='showData'></p>
  22. </body>
  23. <script>
  24.     tableFromJson();
  26.     function tableFromJson() {
  27.         var myFiles = 
  28. [
  29.   {
  30.     "process_name":"Process1",
  31.     "file_name":"file1",
  32.     "link":"/compared_text/Process1/file1.html",
  33.     is_passed:true
  34.   },
  35.   {
  36.     "process_name":"Process1",
  37.     "file_name":"file2",
  38.     "link":"/compared_text/Process1/file2.html",
  39.     is_passed:true
  40.   },
  41.   {
  42.     "process_name":"Process2",
  43.     "file_name":"file1",
  44.     "link":"/compared_text/Process2/file1.html",
  45.     is_passed:true
  46.   },
  47.   {
  48.     "process_name":"Process2",
  49.     "file_name":"file2",
  50.     "link":"/compared_text/Process2/file2.html",
  51.     is_passed:true
  52.   }
  53. ]
  55.         var col = [];
  56.         for (var i = 0; i < myFiles.length; i++) {
  57.             for (var key in myFiles[i]) {
  58.                 if (col.indexOf(key) === -1) {
  59.                     col.push(key);
  60.                 }
  61.             }
  62.         }
  64.         var table = document.createElement("table");
  66.         var tr = table.insertRow(-1);
  68.         for (var i = 0; i < col.length; i++) {
  69.             var th = document.createElement("th");
  70.             th.innerHTML = col[i];
  71.             tr.appendChild(th);
  72.         }
  74.         for (var i = 0; i < myFiles.length; i++) {
  75.             tr = table.insertRow(-1);
  76.             
  77.             for (var j = 0; j < col.length; j++) {
  78.                 var tabCell = tr.insertCell(-1);
  79.                 let content = myFiles[i][col[j]];
  80.                 tabCell.innerHTML = col[j] === 'link' ? `<a href="${content}">${content}</a>` : content;
  81.             }
  82.         }
  84.         var divShowData = document.getElementById('showData');
  85.         divShowData.innerHTML = "";
  86.         divShowData.appendChild(table);
  87.     }
  88. </script>
  89. </html>
英文:

Test whether the cell you are writing is in the link column and adjust the value you pass to innerHTML accordingly.

  1. for (var j = 0; j &lt; col.length; j++) {
  2. var tabCell = tr.insertCell(-1);
  3. let content = myFiles[i][col[j]];
  4. tabCell.innerHTML = col[j] === &#39;link&#39; ? 
  5. `&lt;a href=&quot;${content}&quot;&gt;${content}&lt;/a&gt;` : content;
  6. }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;test report&lt;/title&gt;
  5. &lt;style&gt;
  6. th, td, p, input, h3 {
  7. font:15px &#39;Segoe UI&#39;;
  8. }
  9. table, th, td {
  10. border: solid 1px #ddd;
  11. border-collapse: collapse;
  12. padding: 2px 3px;
  13. text-align: center;
  14. }
  15. th {
  16. font-weight:bold;
  17. }
  18. &lt;/style&gt;
  19. &lt;/head&gt;
  20. &lt;body&gt;
  21. &lt;p id=&#39;showData&#39;&gt;&lt;/p&gt;
  22. &lt;/body&gt;
  23. &lt;script&gt;
  24. tableFromJson();
  25. function tableFromJson() {
  26. // the json data. (you can change the values for output.)
  27. var myFiles = 
  28. [
  29. {
  30. &quot;process_name&quot;:&quot;Process1&quot;,
  31. &quot;file_name&quot;:&quot;file1&quot;,
  32. &quot;link&quot;:&quot;/compared_text/Process1/file1.html&quot;,
  33. is_passed:true
  34. },
  35. {
  36. &quot;process_name&quot;:&quot;Process1&quot;,
  37. &quot;file_name&quot;:&quot;file2&quot;,
  38. &quot;link&quot;:&quot;/compared_text/Process1/file2.html&quot;,
  39. is_passed:true
  40. },
  41. {
  42. &quot;process_name&quot;:&quot;Process2&quot;,
  43. &quot;file_name&quot;:&quot;file1&quot;,
  44. &quot;link&quot;:&quot;/compared_text/Process2/file1.html&quot;,
  45. is_passed:true
  46. },
  47. {
  48. &quot;process_name&quot;:&quot;Process2&quot;,
  49. &quot;file_name&quot;:&quot;file2&quot;,
  50. &quot;link&quot;:&quot;/compared_text/Process2/file2.html&quot;,
  51. is_passed:true
  52. }
  53. ]
  54. var col = [];
  55. for (var i = 0; i &lt; myFiles.length; i++) {
  56. for (var key in myFiles[i]) {
  57. if (col.indexOf(key) === -1) {
  58. col.push(key);
  59. }
  60. }
  61. }
  62. // Create a table.
  63. var table = document.createElement(&quot;table&quot;);
  64. // Create table header row using the extracted headers above.
  65. var tr = table.insertRow(-1);                   // table row.
  66. for (var i = 0; i &lt; col.length; i++) {
  67. var th = document.createElement(&quot;th&quot;);      // table header.
  68. th.innerHTML = col[i];
  69. tr.appendChild(th);
  70. }
  71. // add json data to the table as rows.
  72. for (var i = 0; i &lt; myFiles.length; i++) {
  73. tr = table.insertRow(-1);
  74. for (var j = 0; j &lt; col.length; j++) {
  75. var tabCell = tr.insertCell(-1);
  76. let content = myFiles[i][col[j]];
  77. tabCell.innerHTML = col[j] === &#39;link&#39; ? `&lt;a href=&quot;${content}&quot;&gt;${content}&lt;/a&gt;` : content;
  78. }
  79. }
  80. // Now, add the newly created table with json data, to a container.
  81. var divShowData = document.getElementById(&#39;showData&#39;);
  82. divShowData.innerHTML = &quot;&quot;;
  83. divShowData.appendChild(table);
  84. }
  85. &lt;/script&gt;
  86. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年9月24日 20:12:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/64046188.html
  • html
  • java
  • javascript
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定