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>#myTable td{padding:8px;}.btnSelect{background-color:#f44336;border:2px solid #f44336;border-radius:4px;color:white;cursor:pointer;}.btnSelect:hover{background-color:#c93326;border:2px solid #c93326;}</style> </head> <body> <table border='1' id="myTable"> <tr> <th>Id</th> <th>Product Name</th> <th>Description</th> <th>Action</th> </tr> <tr> <td><span>1</span></td> <td><strong class='pd-name' >Moto G</strong></td> <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>2</span></td> <td><strong class='pd-name' >Iphone SE</strong></td> <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>3</span></td> <td><strong class='pd-name' >Sony z3</strong></td> <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>4</span></td> <td><strong class='pd-name' >Moto X Play</strong></td> <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>5</span></td> <td><strong class='pd-name' >Samsung S7</strong></td> <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> </table> <script> $(document).ready(function(){ $("#myTable").on('click','.btnSelect',function(){ // get the current row var currentRow=$(this).closest("tr"); var col1=currentRow.find(".pd-price").html(); // get current row 1st table cell TD value var col2=currentRow.find(".pd-name").html(); // get current row 2nd table cell TD value var data=col1+"\n"+col2; alert(data); }); }); </script> </body> </html>
➤ Run / View
Result :