将图像附加到现有 Table Header

Question

我创建了一个 table，我想向 header 添加一个图像。我正在使用一个名为 D3.js 的库来创建 table。代码如下：

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;
    });

此代码来自我的相关 D3 post:

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

问题是： 我可以将图像附加到 table 作为新的 header 行，但我似乎无法将图像附加到现有的header 行。

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

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

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

Answer 1

假设你有这个 table:

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>

要将图像附加到 已经存在的 table 的 headers，只需 select headers 并且，没有任何 "enter" selection，附加图像：

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>

Answer 2

Html 是完全静态的，所以一旦你创建了它，你就不能再使用 html 来操纵它。要动态操作 html，我们使用 JavaScript（这就是 d3 发挥其魔力的方式）。

所以我不太确定你在问什么。

如果您想使用 d3 在 headers 中的图像之前包含文本，您可以使用 .text()

例如，

var columns = [
    {title: "Brrmm Brrmm", src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {title: "Race Me", src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {title: "Faster! Faster!", 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('span')
    .text(function(d) {
        return d.title;
    })
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

演示：http://codepen.io/anon/pen/QdzKKg

将图像附加到现有 Table Header

Append Image to Existing Table Header

html

javascript

tableheader

d3.js