Codepedia
.info
Home
About
Demos
Tools
SVG Wave Generator
Colors
Edit This Code :
<html> <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> .spnSelected { font-weight: bold; border: 1px solid red; border-radius: 2px; font-size: 12px; padding: 2px; cursor: pointer } </style> </head> <body> <button id="btnAddRow">Add New Row </button> <br/> <br/> <table id="myTable"> <tr> <td class='col1'>111</td> <td class='col2'>222</td> <td><span class="spnSelected">Select</span></td> </tr> <tr> <td class='col1'>333</td> <td class='col2'>444</td> <td><span class="spnSelected">Select</span></td> </tr> </table> <script> $(document).ready(function(){ $("#btnAddRow").on('click', function() { //generate random number; var value1 = Math.floor((Math.random() * 50) + 1); var value2 = Math.floor((Math.random() * 100) + 1); var fragment = "<tr><td class='col1'>" + value1 + "</td><td class='col2'>" + value2 + "</td><td><span class='spnSelected'>Select</span></td></tr>"; $("#myTable").append(fragment); }); $("#myTable").on('click', '.spnSelected', function() { var self = $(this).closest("tr"); var col1_value = self.find(".col1").text(); var col2_value = self.find(".col2").text(); alert("Selected row values are \nCol1=" + col1_value + " \nCol2=" + col2_value); }); }); </script> </body> </html>
➤ Run / View
Result :