CODEWITHSUNDEEP
javascriptjavahtmljson
Ben Moalem
Ben Moalem

Reputation: 1

Changing cell in html table from simple text to hyperlink

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:

enter image description here

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>

Upvotes: 0

Views: 928

Answers (4)

pilchard
pilchard

Reputation: 12911

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


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

Upvotes: 0

Ali Şent&#252;rk
Ali Şent&#252;rk

Reputation: 1

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]];
            }

Upvotes: 0

Bamak
Bamak

Reputation: 184

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

Upvotes: 1

Xylah
Xylah

Reputation: 58

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>

Upvotes: 0

Related Questions