CODEWITHSUNDEEP
jqueryhtmlcsshyperlink
Neeraj Verma
Neeraj Verma

Reputation: 2294

How to convert 1 column records of dynamic table into hyperlink

Edit : I tried all the solutions given Below ..there are 3 more external files ..I think they are overriding the setting ..I am pasting them too below

I have a dynamic table in Jquery .I want to make its 3rd column records MZillaID Hyperlink

Here is my Code :

function getErrorStatusList() {

    $.ajax({
        //data comes in response
        success: function (response) {

            obj =  response.d;
            var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";

            for (var x = 0; x < obj.length; x++) {
                output += "<tr><td>" + (x + 1) + "</td><td>" + obj[x].IssueID + "</td><td class='myclass'>" + obj[x].EMID + "</td><td>" + obj[x].EMStatus + "</td></tr>";
            }
            output += "</table>";
            $("#result").append(output);

        },

    });

I want to make records Hyperlink ... Can we do it in CSS /Jquery ??i Created a class(myclass) on particlar column .But I dont know how to procedd . record for this column are already a hyperlink but it is overridden by other css .

Please suggest .Any Help would be helpful

Upvotes: 0

Views: 279

Answers (2)

Neeraj Verma
Neeraj Verma

Reputation: 2294

shaunakde gave me Solution ... I am posting the full Working Code 

function getErrorStatusList() {
    var serve = JSON.stringify({ program: $("#selpros option:selected").text() });
    $.ajax({
        type: "POST",
        url: "UFZillaErrorStatus.aspx/GetErrorStatusList",
        data: serve,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $("#result").empty();
            obj = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";

            for (var x = 0; x < obj.length; x++) {

                output += "<tr><td>" + (x + 1) + "</td><td>" + obj[x].IssueID + "</td><td class='myclass' style='text-decoration:underline;'>" + obj[x].EMID + "</a></td><td>" + obj[x].EMStatus + "</td></tr>";
            }
            output += "</table>";
            $("#result").append(output);

        },
        error: function () { alert("Server Error!!"); }

    });

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

Append anchor <a> tags inside 3rd column- <td> 

output += "<tr><td>" + (x + 1) + "</td><td>" 
         + obj[x].IssueID + "</td><td class='myclass'><a  href='"+obj[x].EMID +"' style='text-decoration:underline;'>" 
                                                   here^
         + obj[x].EMID + "</a></td><td>" + obj[x].EMStatus + "</td></tr>";
                       here^

or after you append use .wrap(),

$("#result").append(output);
$("#result table td:eq(2)").wrap('<a href="'+url+'" style="text-decoration:underline;"></a>');

CSS :

a{
  cursor:pointer;
  text-decoration:underline;
}

Demo

Upvotes: 1

Related Questions