將圖像追加到現有表格標題

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

此代碼是從我的相關D3職位：

D3 Method of Appending Images to a Table Header

的代碼主要是爲背景，我用這種方法感興趣的HTML如何本地交易。因爲這將影響我將如何使用其他庫。

問題是：我可以將圖像作爲新的標題行添加到表中，但我似乎無法將圖像追加到現有的標題行。

換句話說，在我創建帶有文本標題的標題後，我想要在文本標題（每列不同的圖像）旁邊添加圖像。

只是從我迄今爲止的經驗和根據D3專家的建議推測，這個問題可能是一個html特定的問題。

在原生HTML中，可以在創建後將圖像追加到標題？原生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>

Answer 2

Html完全是靜態的，所以一旦你創建它，你不能使用進一步html操縱它。要動態操縱html，我們使用JavaScript（這就是d3如何發揮它的魔力）。

所以我不完全確定你在問什麼。

如果您想包括在使用d3頭圖像之前的文字，你會用.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