Добавить изображение в существующий заголовок таблицы

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