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>Moto G</strong></td> <td>Moto G next generation smart phone</td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>2</span></td> <td><strong>Iphone SE</strong></td> <td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>3</span></td> <td><strong>Sony z3</strong></td> <td>This is waterproof, well designed, etc</td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>4</span></td> <td><strong>Moto X Play</strong></td> <td>Another class product from Moto G Family</td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>5</span></td> <td><strong>Samsung S7</strong></td> <td>Best smart phone, nice UI etc.</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("td:eq(0)").html(); // get current row 1st table cell TD value var col2 = currentRow.find("td:eq(1)").html(); // get current row 2nd table cell TD value var col3 = currentRow.find("td:eq(2)").html(); // get current row 3rd table cell TD value var data = col1 + "\n" + col2 + "\n" + col3; alert(data); }); }); </script> </body> </html>
➤ Run / View
Result :