JavaScriptを使用してテーブルのセルに画像を挿入します。

作成したばかりの新しいセルに画像を挿入します。どうしたらいいですか？誰でも私にそれを案内することができますか？はここにinsertcellsに私のコードです：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>

私が欲しいのは、作成したセルに画像を挿入することです。

出典

2013-06-07 user2462483

'innerHTML'を使ってテキストを' td'に入れることはできますが、 'img'タグを置くことはできません。 – Teemu

@Teemuはい..まさに.. – user2462483

私はかなり理解していませんが、あなたが '' New cell ''の代わりに' '' 'を書いた場合の違いは何ですか？ – Teemu

function displayResult() 
    { 
    document.getElementById("myTable").rows[0].innerHTML="your image"; 
    }

これは役立つかもしれませんが、ダイナミズムは後で達成することができます。

出典

2013-06-07 07:20:35

イメージファイルの名前が表示されます。そこに実際のイメージを置くわけではありません。 – LaurelS

新しいセルの内部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'/>"; 
}

出典

2013-06-07 07:20:37

ねえ、これは私のために働いた！私はラインの最小数も好きです。 – LaurelS

あなたは、画像要素を作成し、新しいセルに付加することができます：あなたはそれをあなたが作る必要がありますその方法を行う場合

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と他の属性をエスケープするようにしてください。

出典

2013-06-07 07:21:01 MrCode

このツールは、HTML属性のエスケープに役立ちます。http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php – brntsllvn

JavaScriptを使用してテーブルのセルに画像を挿入します。

答えて

関連する問題