Question

我想创建一个动态数组/脚本，我需要在我的JSON返回中添加一些链接，以便我可以创建一个长数组，其中包含动态列表或带有准备好的JSON文件的源。

My HTML's picture

<table id="userdata" border="5">            
        <th>Revision  Date</th>
        <th>Document  Name</th>
        <th>Department </th>
        <th>Description</th>
        <th>Link</th>     
</table>

var data = {

    "person": [{
        "revisiondate": "21 April 2016",
        "documentname": "1658MC",
        "department": "Sales",
        "description": "Available",
        "link": "href=1658MC.pdf"
    }, {
        "revisiondate": "16 April 2016",
        "documentname": "VCX16B",
        "department": "Enginnering",
        "description": "Not Available",
        "link": "href=VCX16B.pdf"
    }, {
        "revisiondate": "15 March 2016",
        "documentname": "AB36F",
        "department": "Custumer Services",
        "description":  "Not Available",
        "link": "href=AB36F.pdf"
    }, {
        "revisiondate": "12 Agust 2016",
        "documentname": "FC25D",
        "department": "Technical Support",
        "description": "Not Available",
        "link": "href=FC25D.pdf"
    }]
} 
//$.getJSON("new4.json", function(data) {
// console.log(data);

//$.getJSON('new4.json', function(data) {
    $.each(data.person, function(i, person) {
        var tblRow =    "<tr><td>" + person.revisiondate + 
                        "</td><td>" + person.documentname + 
                        "</td><td>" + person.department +
                        "</td><td>" + person.description + 
                        "</td><td>" + person.link +
                        "</td></tr>"
        $(tblRow).appendTo("#userdata tbody");
    });

Clicking on marking area

如何添加指向我的脚本行的链接，例如当我点击此链接时，它会像PDF或HTML一样打开我的源代码。我可以用HTML做到这一点但是当我尝试使用JSON时我无法做到。

"</td><td><a  target='_blank' href='\\mustafa02\group\Manuals\Reviewed\ "+ person.documentname.split('href=')[0]+"' >"+person.documentname.split('href=')[0]+"</a></td>"

我的pdf在已审核的文件夹中。所以我的文件夹路径如上所示。 \\mustafa02\group\Manuals\Reviewed\

Answer 1

$.each(data.person, function(i, person) {
            var tblRow =    "<tr><td>" + person.revisiondate + 
                            "</td><td>" + person.documentname + 
                            "</td><td>" + person.department +
                            "</td><td>" + person.description + 
                            "</td><a href='" + person.link + "'>link text</a><td>" +
                            "</td></tr>"
            $(tblRow).appendTo("#userdata tbody");
        });

你应该删除attrribute＆＃39; href＆＃39;来自你的json

或者您可以将单引号添加到json数据链接中，如此

var data = {
        "person": [{
            "revisiondate": "21 April 2016",
            "documentname": "1658MC",
            "department": "Sales",
            "description": "Available",
            "link": "href='1658MC.pdf'"
        }, {
            "revisiondate": "16 April 2016",
            "documentname": "VCX16B",
            "department": "Enginnering",
            "description": "Not Available",
            "link": "href='VCX16B.pdf'"
        }, {
            "revisiondate": "15 March 2016",
            "documentname": "AB36F",
            "department": "Custumer Services",
            "description":  "Not Available",
            "link": "href='AB36F.pdf'"
        }, {
            "revisiondate": "12 Agust 2016",
            "documentname": "FC25D",
            "department": "Technical Support",
            "description": "Not Available",
            "link": "href='FC25D.pdf'"
        }]


$.each(data.person, function(i, person) {
            var tblRow =    "<tr><td>" + person.revisiondate + 
                            "</td><td>" + person.documentname + 
                            "</td><td>" + person.department +
                            "</td><td>" + person.description + 
                            "</td><a " + person.link + ">link text</a><td>" +
                            "</td></tr>"
            $(tblRow).appendTo("#userdata tbody");
        });

Answer 2

添加<a>标记href和target="_black"以打开新标签中的链接，并使用拆分从json中删除href。

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>   
    <table id="userdata" border="5">            
            <th>Revision  Date</th>
            <th>Document  Name</th>
            <th>Department </th>
            <th>Description</th>
            <th>Link</th>     
    </table>
<script>
        var data = {
        "person": [{
            "revisiondate": "21 April 2016",
            "documentname": "1658MC",
            "department": "Sales",
            "description": "Available",
            "link": "href=1658MC.pdf"
        }, {
            "revisiondate": "16 April 2016",
            "documentname": "VCX16B",
            "department": "Enginnering",
            "description": "Not Available",
            "link": "href=VCX16B.pdf"
        }, {
            "revisiondate": "15 March 2016",
            "documentname": "AB36F",
            "department": "Custumer Services",
            "description":  "Not Available",
            "link": "href=AB36F.pdf"
        }, {
            "revisiondate": "12 Agust 2016",
            "documentname": "FC25D",
            "department": "Technical Support",
            "description": "Not Available",
            "link": "href=FC25D.pdf"
        }]
    } 
    //$.getJSON("new4.json", function(data) {
    // console.log(data);

    //$.getJSON('new4.json', function(data) {
        $.each(data.person, function(i, person) {
            var tblRow =    "<tr><td>" + person.revisiondate + 
                            "</td><td>" + person.documentname + 
                            "</td><td>" + person.department +
                            "</td><td>" + person.description + 
                            "</td><td><a target='_blank' href='"+ person.link.split('href=')[1]+"' >"+person.link.split('href=')[1]+"</a></td></tr>"
            $(tblRow).appendTo("#userdata tbody");
        });
        //});
</script>
</body>
</html>

＆＃13;

如何在JSON脚本中添加链接/ href /超链接

2 个答案: