Databases
StackOverflow2013
Postsdbo
POHow to handler <tr> event click to get attr and run some function
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to handler <tr> event click to get attr and run some function
    text
    copied!<p>i have problem with my table that generate from function.</p> <p>i need to get the clicked td attr and run some function. but it doesn't work. what wrong with my code..?</p> <p>generate_table.js</p> <pre><code>function generate_table(data,lnk){ tbl=''; table_stayle=' border=1; cellpadding=0; cellspacing=0;' ; th_stayle='style="color:#FFFFFF; font-weight:bolder; background-color:#003366" '; tr_stayle=' bgcolor="#CCCCFF" '; td_stayle=''; tr_alternate=''; var tbl_body = ''; var tbl_h = ''; $.each(data[0], function(k , v) { tbl_h=tbl_h + "&lt;td&gt;"+k+"&lt;/td&gt;"; }) tbl_h ='&lt;tr align="center" '+th_stayle+'&gt;'+tbl_h+ '&lt;/tr&gt;'; //detail var tbl_body = ""; $.each(data, function() { var tbl_row = ""; var row_key=''; $.each(this, function(k , v) { if(k==lnk){ row_key=v; tbl_row =tbl_row + "&lt;td&gt;&lt;a href='javascript:void(0);'&gt;"+v+"&lt;/a&gt;&lt;/td&gt;";//&lt;a href='"+v+"'&gt; }else{ tbl_row =tbl_row + "&lt;td&gt;"+v+"&lt;/td&gt;"; } }) tbl_body =tbl_body+ '&lt;tr '+tr_stayle+' kode="'+row_key+'" class="tbl_tr" &gt;'+tbl_row + '&lt;/tr&gt;'; }) return '&lt;table id="tabel" '+table_stayle+'&gt;'+tbl_h+tbl_body+'&lt;/table&gt;'; } </code></pre> <p>php code like this :</p> <pre><code> &lt;script language="javascript1.5" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script language="javascript1.5" src="generate_tabel.js"&gt;&lt;/script&gt; &lt;style&gt; #div_body {overflow:auto; height:300px;} &lt;/style&gt; ======================================================================&lt;br /&gt; &lt;input type="button" id="btn" name="btn" value="load data"&gt; &lt;div id="div_body" style="overflow:auto;border:solid; border-width:medium; width:400;300"&gt; &lt;/div&gt; &lt;script&gt; $(function(){ $('#btn').click(function(){ url="getjson.php"; aa=$.getJSON(url , function(data) { //JSON DATA LIKE THIS: // aa='[{"Id":"1","wh2":"HandPhone","wh3":"-"}, // {"Id":"2","wh2":"Acessory","wh3":"-"}, // {"Id":"3","wh2":"Batery","wh3":"-"}, // {"Id":"4","wh2":"Chassing","wh3":"-"}]'; $('#div_body').html(generate_table(data,"wh2")); }); }); // $(".tbl_row").click(function(){ // alert($("tr").attr("kode")); // //some function // }); $('#div_body').on('click','.tbl_tr',function(){ alert($(this).attr("kode")); }); }); &lt;/script&gt; </code></pre> <p>and the function handler click :</p> <pre><code>$(".tbl_tr").click(function(){ alert($("tr").attr("kode")); //some function }); </code></pre> <p>yes.. mention the answer i change the jquery :</p> <pre><code>&lt;script language="javascript1.5" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script language="javascript1.5" src="generate_tabel.js"&gt;&lt;/script&gt; </code></pre> <p>and </p> <pre><code> $(".tbl_tr").on("click", function(){ alert($(this).attr("kode")); //some function }); </code></pre> <p>in Firefox error console no give message. but the alert doesnt run.</p> <p>here my code: <a href="http://jsfiddle.net/candrapurnama/DcBwA/" rel="nofollow">jsfiddle</a></p> <p>solved: i wrote simple code for simulation.</p> <pre><code>&lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt; ======================================================================&lt;br /&gt; &lt;input type="button" id="btn" value="OK"&gt; &lt;div id="aaa"&gt;&lt;a href=""&gt;&lt;span &gt;aaaaaaa&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;script&gt; $('#btn').click(function(){ $('#aaa').html(' &lt;table id="tbl" border=1&gt;&lt;tr code="k1" class="ss"&gt;&lt;td&gt;&lt;a&gt;aaa&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr code="k2" class="ss"&gt;&lt;td&gt;&lt;a&gt;bb&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr code="k3" class="ss"&gt;&lt;td&gt;&lt;a&gt;cc&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'); }); $('#aaa').on('click','#tbl tr a',function(a){ alert($(this).closest('tr').attr('code')); }); &lt;/script&gt; </code></pre> <p>thank you all. I love you..</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload