web-dev-qa-db-ja.com

Javascriptのテーブルセルに画像を挿入します

作成したばかりの新しいセルに画像を挿入したい。どうすればいいですか？誰かが私にそれをするように導くことができますか？挿入セルへの私のコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>

</body>
</html>

作成したセルに画像を挿入するだけです。

javascripthtmlimagehtml-tablecell
7
user2462483

画像要素を作成して、新しいセルに追加できます。

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="New cell";

    var img = document.createElement('img');
    img.src = "link to image here";
    x.appendChild(img);
}

画像の生のHTMLを作成する場合は注意してください。そのように行う場合は、srcやその他の属性を必ずエスケープする必要があります。

19
MrCode

新しいセルの内部HTMLをimg要素のHTMLに設定するだけで、必要なsrcまたは属性を使用できます。

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="<img src='myImageURL' alt='hello'/>";
}
6
p e p
 function displayResult()
    {
   document.getElementById("myTable").rows[0].innerHTML="your image";
    }

これが役立つかもしれません、動的主義は後で達成することができます、それが今のところうまくいくかどうか試してみてください？

0
user2412575