如何在json值內使用一些html元素標簽

Question

我使用Ajax，js將json數據綁定到html表。 在我的項目中，我有4個表格標題（序號，名稱，年份，下載鏈接）。 前三列同步並正常運行，但沒有錯誤。但是，最后一列我需要帶有鏈接的引導下載按鈕。 我如何使用json做到這一點？

確切地我需要什么：如果我加載頁面，則需要我的名稱，年份，引導下載按鈕和插入的鏈接。

html

<body>
<div class="container">
    <div class="first bg-primary">
        <h2>A R Rahman All Movies</h2>
        <p>Download songs free</p>
    </div>
    <!--  -->
    <table id="personDataTable" class="table table-dark table-hover">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Movie Name</th>
                <th>Year</th>
                <th>Download Link</th>
            </tr>
        </thead>

    </table>
    <!-- table end -->

    <script>
        $.ajax({
            //url: 'https://jsonplaceholder.typicode.com/posts',
            url: 'https://10rs.000webhostapp.com/json-data.json',
            type: "get",
            dataType: "json",

            success: function (data) {
                drawTable(data);
            }
        });

        function drawTable(data) {
            for (var i = 0; i < data.length; i++) {
                drawRow(data[i]);
            }
        }

        function drawRow(rowData) {
            var row = $("<tr />")
            $("#personDataTable").append(row);
            row.append($("<td>" + rowData.id + "</td>"));
            row.append($("<td>" + rowData.name + "</td>"));
            row.append($("<td>" + rowData.year + "</td>"));
            row.append($("<td>" + rowData.link + "</td>"));
        }
    </script>

    <footer class="bg-danger">
        <p>Design and Developed by Rajadurai</p>
    </footer>
</div>
<!-- container end -->
</body>

這是數據的輸出

[
{
  "id": 1,
  "name": "Roja",
  "year": "1992",
  "link": "<a href="#" class="btn btn-info" role="button">Link Button</a>"
},
{
  "id": 2,
  "name": "Gentleman",
  "year": "1993"
},
{
  "id": 3,
  "name": "Kizhakku Cheemayile",
  "year": "1993"
},
{
  "id": 4,
  "name": "Pudhiya Mugam",
  "year": "1993"
},
{
  "id": 5,
  "name": "Thiruda Thiruda",
  "year": "1993"
}
]

Answer 1

你可以用這個

row.append($("<td><a href='" + rowData.link + "'><button class='btn'>Go</button></a></td>"));

Answer 2

您必須通過僅放置鏈接或用簡單（'）代替雙破折號（“）來修改數據中的鏈接

1-如果您只想在數據中放入鏈接

//像這樣修改您的代碼

$.ajax({
        //url: 'https://jsonplaceholder.typicode.com/posts',
        url: 'https://10rs.000webhostapp.com/json-data.json',
        type: "get",
        dataType: "json",

        success: function (data) {
            drawTable(data);
        }
    });

    function drawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

    function drawRow(rowData) {
        var row = $("<tr />")
        $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.year + "</td>"));
        row.append($("<td><a href='" + rowData.link + "' class='btn btn-info' role='button'>Link Button</a></td>"));
    }

2-如果您想用簡單的Cote（'）來代替double Cote（“），則無需更改代碼即可使用

Answer 3

最后，我得到了完整的答案，項目運行良好。

的HTML

<div class="container">
    <div class="header">
        <h2>A R Rahman All Movie Songs</h2>
        <p>Download songs free</p>
    </div>
    <!-- header end -->
    <div class="table-responsive-md">
        <table id="personDataTable" class="table table-dark">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Movie Name</th>
                    <th>Year</th>
                    <th>Download</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- table end -->

    <footer class="bg-success">
        <p style="color:#ffffff;">Design and Developed by
            <span style="color:red;background-color:yellow;">Rajadurai</span>
        </p>
    </footer>
</div>

JAVASCRIPT

<script>
    $.ajax({
        //url: 'https://jsonplaceholder.typicode.com/posts',
        url: 'https://10rs.000webhostapp.com/ar/json-data.json',
        //url: 'json-data.json',
        type: "get",
        dataType: "json",

        success: function (data) {
            drawTable(data);
        }
    });

    function drawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

    function drawRow(rowData) {
        var row = $("<tr />")
        $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.title + "</td>"));
        row.append($("<td>" + rowData.year + "</td>"));
        row.append($("<td><a href='" + rowData.link + "' class='btn btn-info' role='button' target='_blank'>Download</a></td>"));
}
</script>

JSON格式

[{
    "id": 1,
    "title": "Roja",
    "year": "1992"
},
{
    "id": 2,
    "title": "Gentleman",
    "year": "1993"
},
{
    "id": 3,
    "title": "Kizhakku Cheemayile",
    "year": "1993"
},
{
    "id": 4,
    "title": "Pudhiya Mugam",
    "year": "1993"
},
{
    "id": 5,
    "title": "Thiruda Thiruda",
    "year": "1993"
}]

輸出值

點擊此鏈接查看輸出

如何在json值內使用一些html元素標簽

問題描述

3 個解決方案

解決方案1
2 2018-01-31 08:30:31

解決方案2
2 2018-01-31 08:53:41

解決方案3
0 已采納 2018-02-02 15:59:16

如何在json值內使用一些html元素標簽

問題描述

3 個解決方案

解決方案1 2 2018-01-31 08:30:31

解決方案2 2 2018-01-31 08:53:41

解決方案3 0 已采納 2018-02-02 15:59:16

解決方案1
2 2018-01-31 08:30:31

解決方案2
2 2018-01-31 08:53:41

解決方案3
0 已采納 2018-02-02 15:59:16