如何将链接文本更改为 HTML 中的图像

Question

如何将链接文本更改为 HTML 中的图像

Iss*_*der 4 html javascript css json html-table

我是一个 HTML 初学者，我遇到了一个问题，所以我有一个基本上是 Json 网络数据库的网页，这是网页的图像。它只是一张装满数据的表格。我的问题是如何使您在表格中看到的链接显示为图像而不是文本链接。

这是此页面的代码。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>Get Levels</title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            background: #71e2c5;
        }

        td,
        th {
            border: 5px solid #ffc300;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #4CAF50;
            color: black;
        }

        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            text-align: center;
        }
    </style>
    <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
    </script>
    <script type='text/javascript'>
        //<![CDATA[
        $(function() {
            var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
            var ids = 0;
            var data_src = '';
            $.ajax({
                url: uri,
                type: 'GET',
                data: '',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function(data, textStatus, jqXHR) {
                    var jsonStr = JSON.stringify(data.data);
                    var html_view = '<table><tr>';
                    html_view = html_view + '<th>Level ID</th>';
                    html_view = html_view + '<th>Level Image</th>';
                    html_view = html_view + '<th>Word 1</th>';
                    html_view = html_view + '<th>Word 2</th>';
                    html_view = html_view + '<th>Word 3</th>';
                    html_view = html_view + '<th>Word 4</th>';
                    html_view = html_view + '</tr>';
                    for (var i = 0; i < data.data.length; i++) {
                        html_view = html_view + '<tr>';
                        html_view = html_view + '<td>' + data.data[i].id + '</td>';
                        html_view = html_view + '<td>' + data.data[i].img + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
                        html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
                        html_view = html_view + '</tr>';
                    }
                    html_view = html_view + '</table>';
                    $('#data_view').html(html_view);
                }
            });
        });
        //]]>
    </script>
</head>

<body style="background-image: url('background.jpg');">
    <center><img width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></center>
    <b><font size="6" face="Comic Sans MS" color="#50bfda"><center><a>Game Levels Web Data Base</a></center></font></b>
    <br>
    <div id='data_view'>
        Loading Data , Please wait ....
    </div>
    <br>
    <br>
    <div id='data_str'>
        <br>
    </div>
    </br>
    <div class='footer'>
    </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dav*_*vid 5

看起来这就是图片的网址：

data.data[i].img

Run Code Online (Sandbox Code Playgroud)

您在此处添加为文本：

html_view = html_view + '<td>'+data.data[i].img+'</td>';

Run Code Online (Sandbox Code Playgroud)

遵循您正在使用的相同编码样式，您可以将其包装在 HTML 标签中<a>，<img>就像这样简单。例如：

html_view = html_view + '<td><a href="'+data.data[i].img+'"><img src="'+data.data[i].img+'"/></a></td>';

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，7 月前
查看次数：	54 次
最近记录：	5 年，7 月前