Разместить изображение в ячейке таблицы с помощью jQuery - PullRequest
Новая
       7

Разместить изображение в ячейке таблицы с помощью jQuery

0 голосов
/ 17 мая 2018

Я испытывал эту проблему, когда выполнял свою работу в лаборатории. Итак, я делаю, что есть таблица, и когда я нажимаю кнопку, она добавляет изображение к некоторым конкретным ячейкам таблицы. Тем не менее, таблица искажается каждый раз, когда появляются изображения (Вы можете видеть как на приложенном изображении ниже). Дисплей: блок не работает. Я попытался добавить display: block в тег img в css по умолчанию, и он также не работал.

Изображение

Это мой код для добавления изображения: 

$("table").find("tr").eq(1).find("td").eq(1).append("<img src='image.png' style='display:block;' width='100%' height='auto'/>");

Это мой css для таблицы (в поле указан id таблицы): 

#box {
        height: 400px; 
        width: 400px;
        position: fixed;
        margin-left: -200px;
        margin-top: -200px;
        top: 50%;
        left: 50%;
    }

Кто-нибудь знает, как это исправить? Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Если вы хотите сохранить постоянным размерность всех ячеек таблицы, то вы должны либо

  • установить постоянную ширину и высоту для всех тд (или)
  • Добавить новый контейнер div для изображения к каждому td с установленными шириной и высотой

Причина искажения таблицы заключается в том, что для ячеек таблицы не задано установленное измерение, строка и столбец, к которому прикреплено изображение, сохраняют высоту и ширину, а другие строки и столбцы, не имеющие данных, стали крошечными

0 голосов
/ 17 мая 2018

Вам необходимо задать фиксированную ширину и высоту для ячеек таблицы, чтобы они не искажались во время добавления изображений. 

function addImage() {
  $("table").find("tr").eq(1).find("td").eq(1).append("<img src='https://kbob.github.io/images/sample-5.jpg' style='display:block;' width='100%' height='auto'/>");
}
table img {
  width: 200px;
}
table td {
  width: 200px;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>  
</table>
<button onClick='addImage()'>Click</button>

Попробуйте и дайте мне знать, если это было вашим требованием.

...