![](/img/trans.png)
[英]How can I add "href" attribute to a link dynamically using JavaScript?
[英]How can I add a link/href/hyperlink in JSON script
我想創建一個動態數組/腳本,並且需要在JSON返回值中添加一些鏈接,以便可以創建一個長數組,其中包含帶有准備好的JSON文件的動態列表或源。
<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");
});
我如何向我的腳本行添加鏈接,例如當我單擊此鏈接時,該鏈接已打開到我的源文件(如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\\
$.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");
});
您應該從json中刪除attrribute'href'
或者,您可以像這樣在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");
});
添加一個帶有href
和target="_black"
的<a>
標記,以在新標簽頁中打開鏈接,並使用split從json中刪除href。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.