2012-04-04 8 views
-3

テーブル内で動的にタグを作成する方法。最初のリンクを作成するには、リンクの内側に、この内部機能を使用して...jQueryで動的に作成されたimgタグ?

<table> 
    <tr> 
     <td> 
      <a> 
       <img /> 
      </a> 

      // Add Some more when every time my function is run..? like that 
      // <a> 
      // <img/> 
      // </a> 

     </td> 
    </tr> 
</table> 

イムを私は持っている場合のようにimgタグを作成しますが、その私を助けて動作しませんでした。

$(document.createElement("img")).attr('Some attr'); 
+0

これは、簡単に公式jQueryのドキュメントを参照することによって研究されています。 http://api.jquery.com/append/ – Patrick

+1

あなたはあなたが望む情報を持っている場合、受け入れるように答えを記入することを忘れないでください –

答えて

2

以下のようにのようなクレート画像要素をCNAのより次に試してください:

まあ
$('table tr td').append('<a href="#"><img src="/favicon.ico"/></a>'); 
0
$(document).ready(function(){ 

    $('.any_element_you_want').html('<a href="/home" title="Home"><img src="image.png"></a>'); 

}); 
0
のjqueryの

メイクを使用して、 "jquree" でのjQueryを意味する場合は、

$(document).ready(function(){ 

    var elem = new Element('img', 
       { src: 'pic.jpg', alt: 'alternate text' }); 
    $(document).insert(elem); //here you can also make use of `append` method instead of this method 
} 

または

var img = new Image(1,1); ///params are optional 
img.src = ''pic.jpg'; 
+0

私はその仕事をしていると思います。 – QasimRamzan

+0

@ QasimRamzan - あなたの要件を満たしている場合は、受け入れてupvoteの回答よりも –

0
var td = $('table tr td'); 
td.append('<a><img src="whatever.jpg"/></a>'); 
2

、私はそれに答えるためにつもりはなかったが、私は(私のPOVから)すべての正しい答えを見ていないよ:

function addElement(tdId) { // Specify the id the of the TD as an argument 
    $('#' + tdId).append(// Append to the td you want 
     $('<a></a>').attr({ // Create an element and specify its attributes 
      'href': '/home', 
      'title': 'Home' 

     }).append(// Also append the image to the link 
      $('<img />').attr({ // Same, create the element and specify its attributes 
       'src': 'image.png', 
       'width': '100px', 
       'height': '100px' 
      }) 
     ) // Close the "append image" 
    ) // Close the "append anchor" 
} 

今では純粋なjQueryの答えです。 javacriptの答えは以下のようになります。

function addElement(tdId) { // Specify the id the of the TD as an argument 
    // Create the DOM elements 
    var a = document.createDocumentFragment('a'), 
     img = document.createDocumentFragment('img') // See the use of document fragments for performance 

    // Define the attributes of the anchor element 
    a.href = '/home' 
    a.title = 'Home' 

    // Define the attributes of the img element 
    img.src = 'image.png' 
    img.width = '100px' 
    img.height = '100px' 

    // Append the image to the anchor and the anchor to the td 
    document.getElementById(tdId).appendChild(a.appendChild(img)) 
} 

私はjsバージョンが読みやすくなっていると思います。しかしそれは私の意見です; o)。

0

ボタンをクリックするたびに、画像URL abc.png のimgタグが追加され、idがimagedivのdivに追加されます。

$("button").click(function() 
{ 
    var img=$('<img id="dynamic">');  
    $(document.createElement('img')); 
    img.attr('src',"abc.png"); 
    img.appendTo('#imagediv'); 
    });