javascript - 将图像附加到现有表头

Question

我创建了一个表格，我想在标题中添加一个图像。我正在使用一个名为 D3.js 的库来创建表。代码如下:

var columns = [
    {src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {src:"http://iconbug.com/data/b4/256/4ece97792658df143eb693c23bb991f3.png"}
];

var table = d3.select("body").append('table');
var thead = table.append('thead');

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

此代码来 self 的相关 D3 帖子:

D3 Method of Appending Images to a Table Header

代码主要用于上下文，我对 native HTML 如何处理此方法很感兴趣。因为这将影响我将如何使用其他库。

问题是:我可以将图像作为新的标题行附加到表格中，但我似乎无法将图像附加到现有的标题行中。

换句话说，在创建带有文本标题的标题后，我想在文本标题旁边添加图像(每列不同的图像)。

只是根据我目前的经验进行推测并听取了 D3 专家的建议，这个问题可能是一个特定于 html 的问题。

在原生 HTML 中，可以在创建标题后将图像附加到标题吗？ native HTML 还能为这个问题带来什么？

Answer 1

假设你有这张表:

table, th, td {
   border: 1px solid gray;
}

<table>
<tr>
   <th>Header 1</th>
   <th>header2</th>
   <th>header3</th>
</tr>
<tr>
   <td>foo</td>
   <td>bar</td>
   <td>baz</td>
</tr>

要将图像附加到该已存在 表的标题，只需选择标题，无需任何“输入”选择，附加图像:

d3.selectAll('th')
    .data(columns)
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

这是演示:

var columns = [
    {src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {src:"http://iconbug.com/data/b4/256/4ece97792658df143eb693c23bb991f3.png"}
];

d3.selectAll('th')
    .data(columns)
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

table, th, td {
   border: 1px solid gray;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<table>
<tr>
   <th>Header 1</th>
   <th>header2</th>
   <th>header3</th>
</tr>
<tr>
   <td>foo</td>
   <td>bar</td>
   <td>baz</td>
</tr>