英文:
Changing cell in html table from simple text to hyperlink
问题
我正在进行一个简单的个人项目，以便在表格中展示一个 JSON 数组。这个表格包含："process name"（进程名称）、"file name"（文件名称）、"link"（链接）以及一个名为"is passed"（是否通过）的布尔标志。
主要问题是我想将链接下的单元格改为超链接，可以被点击，并引导我到其他路径。
当前表格状态：
附上 HTML 和 JS 代码：
<!DOCTYPE html>
<html>
<head>
<title>测试报告</title>
<style>
th, td, p, input, h3 {
font:15px 'Segoe UI';
}
table, th, td {
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<p id='showData'></p>
</body>
<script>
tableFromJson();
function tableFromJson() {
// JSON 数据（您可以更改值以输出不同内容。）
var myFiles =
[
{
"process_name":"Process1",
"file_name":"file1",
"link":"/compared_text/Process1/file1.html",
is_passed:true
},
{
"process_name":"Process1",
"file_name":"file2",
"link":"/compared_text/Process1/file2.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file1",
"link":"/compared_text/Process2/file1.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file2",
"link":"/compared_text/Process2/file2.html",
is_passed:true
}
]
var col = [];
for (var i = 0; i < myFiles.length; i++) {
for (var key in myFiles[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// 创建表格
var table = document.createElement("table");
// 使用上面提取的标头创建表格标题行
var tr = table.insertRow(-1); // 表格行
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // 表格标题
th.innerHTML = col[i];
tr.appendChild(th);
}
// 将 JSON 数据添加为行到表格中
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 (col[j] === "link") {
var link = document.createElement("a");
link.href = myFiles[i][col[j]];
link.innerHTML = myFiles[i][col[j]];
tabCell.appendChild(link);
} else {
tabCell.innerHTML = myFiles[i][col[j]];
}
}
}
// 现在，将带有 JSON 数据的新创建表格添加到一个容器中
var divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</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:
Attaching HTML & JS code:
<!DOCTYPE html>
<html>
<head>
<title>test report</title>
<style>
th, td, p, input, h3 {
font:15px 'Segoe UI';
}
table, th, td {
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<p id='showData'></p>
</body>
<script>
tableFromJson();
function tableFromJson() {
// the json data. (you can change the values for output.)
var myFiles =
[
{
"process_name":"Process1",
"file_name":"file1",
"link":"/compared_text/Process1/file1.html",
is_passed:true
},
{
"process_name":"Process1",
"file_name":"file2",
"link":"/compared_text/Process1/file2.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file1",
"link":"/compared_text/Process2/file1.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file2",
"link":"/compared_text/Process2/file2.html",
is_passed:true
}
]
var col = [];
for (var i = 0; i < myFiles.length; i++) {
for (var key in myFiles[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// Create a table.
var table = document.createElement("table");
// Create table header row using the extracted headers above.
var tr = table.insertRow(-1); // table row.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // table header.
th.innerHTML = col[i];
tr.appendChild(th);
}
// add json data to the table as rows.
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);
tabCell.innerHTML = myFiles[i][col[j]];
}
}
// Now, add the newly created table with json data, to a container.
var divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>
答案1
得分: 1
你可以像这样创建链接
我认为你应该将tabCell.innerHTML = myFiles[i][col[j]]; 替换为类似这样的内容（当你要添加链接时）：
var a = document.createElement('a');
a.title = "我的标题文本";
a.href = "http://example.com";
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):
var a = document.createElement('a');
a.title = "my title text";
a.href = "http://example.com";
tabCell.appencChild(a);
答案2
得分: 0
你可以尝试类似这样的代码：
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]];
}
}
}
它会检查是否为链接（在你的情况下，链接是 j=2），然后将其放入 `<a href=""></a>` 中。
英文:
You can try something like this:
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]];
}
}
}
It check if it is a link (in your case links are J=2) and put in in <a href="></a>
答案3
得分: 0
你可以将数据添加部分更改如下。
if (new String(myFiles[i][col[j]]).indexOf('.html') > -1) {
tabCell.innerHTML = '<a href="' + myFiles[i][col[j]] + '">点击查看详情</a>';
} else {
tabCell.innerHTML = myFiles[i][col[j]];
}
英文:
You can change the data adding part as follows.
if(new String(myFiles[i][col[j]]).indexOf('.html')>-1){
tabCell.innerHTML = '<a href="' + myFiles[i][col[j]] + '">Click For Details</a>';
}else{
tabCell.innerHTML = myFiles[i][col[j]];
}
答案4
得分: 0
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
let content = myFiles[i][col[j]];
tabCell.innerHTML = col[j] === 'link' ?
`<a href="${content}">${content}</a>` : content;
}
<!DOCTYPE html>
<html>
<head>
<title>test report</title>
<style>
th, td, p, input, h3 {
font:15px 'Segoe UI';
}
table, th, td {
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<p id='showData'></p>
</body>
<script>
tableFromJson();
function tableFromJson() {
var myFiles =
[
{
"process_name":"Process1",
"file_name":"file1",
"link":"/compared_text/Process1/file1.html",
is_passed:true
},
{
"process_name":"Process1",
"file_name":"file2",
"link":"/compared_text/Process1/file2.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file1",
"link":"/compared_text/Process2/file1.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file2",
"link":"/compared_text/Process2/file2.html",
is_passed:true
}
]
var col = [];
for (var i = 0; i < myFiles.length; i++) {
for (var key in myFiles[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
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);
let content = myFiles[i][col[j]];
tabCell.innerHTML = col[j] === 'link' ? `<a href="${content}">${content}</a>` : content;
}
}
var divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>
英文:
Test whether the cell you are writing is in the link column and adjust the value you pass to innerHTML accordingly.
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
let content = myFiles[i][col[j]];
tabCell.innerHTML = col[j] === 'link' ?
`<a href="${content}">${content}</a>` : content;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>test report</title>
<style>
th, td, p, input, h3 {
font:15px 'Segoe UI';
}
table, th, td {
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<p id='showData'></p>
</body>
<script>
tableFromJson();
function tableFromJson() {
// the json data. (you can change the values for output.)
var myFiles =
[
{
"process_name":"Process1",
"file_name":"file1",
"link":"/compared_text/Process1/file1.html",
is_passed:true
},
{
"process_name":"Process1",
"file_name":"file2",
"link":"/compared_text/Process1/file2.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file1",
"link":"/compared_text/Process2/file1.html",
is_passed:true
},
{
"process_name":"Process2",
"file_name":"file2",
"link":"/compared_text/Process2/file2.html",
is_passed:true
}
]
var col = [];
for (var i = 0; i < myFiles.length; i++) {
for (var key in myFiles[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// Create a table.
var table = document.createElement("table");
// Create table header row using the extracted headers above.
var tr = table.insertRow(-1); // table row.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // table header.
th.innerHTML = col[i];
tr.appendChild(th);
}
// add json data to the table as rows.
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);
let content = myFiles[i][col[j]];
tabCell.innerHTML = col[j] === 'link' ? `<a href="${content}">${content}</a>` : content;
}
}
// Now, add the newly created table with json data, to a container.
var divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论