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 type="css"> #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 id="tblDemo" border="1" class="table table-striped"> <thead> <tr> <th></th> <th>Id</th> <th>Product Name</th> <th>Description</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="chk" /> </td> <td> <span>1</span> </td> <td> <strong class="pd-name">Moto G</strong> </td> <td> <p>Moto G next generation smart phone at price <span class="pd-price">50$</span> </p> </td> <td> <button class="btn btn-primary btnDemo">Select</button> </td> </tr> <tr> <td> <input type="checkbox" class="chk" /> </td> <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 at price <span class="pd-price">500$</span> </p> </td> <td> <button class="btn btn-primary btnDemo">Select</button> </td> </tr> <tr> <td> <input type="checkbox" class="chk" /> </td> <td> <span>3</span> </td> <td> <strong class="pd-name">Sony z3</strong> </td> <td> <p>This is waterproof, well designed, etc at price <span class="pd-price">250$</span> </p> </td> <td> <button class="btn btn-primary btnDemo">Select</button> </td> </tr> <tr> <td> <input type="checkbox" class="chk" /> </td> <td> <span>4</span> </td> <td> <strong class="pd-name">Moto X Play</strong> </td> <td> <p>Another class product from Moto G Family at price <span class="pd-price">150$</span> </p> </td> <td> <button class="btn btn-primary btnDemo">Select</button> </td> </tr> <tr> <td> <input type="checkbox" class="chk" /> </td> <td> <span>5</span> </td> <td> <strong class="pd-name">Samsung S7</strong> </td> <td> <p>Best smart phone, nice UI etc. at price <span class="pd-price">450$</span> </p> </td> <td> <button class="btn btn-primary btnDemo">Select</button> </td> </tr> </tbody> </table><br/> <button id="btnRows" class="btn btn-success">Get Selected Row</button> <script> $(document).ready(function() { $("#btnRows").on('click', function() { var aData = []; $("#tblDemo tbody tr").each(function() { var currentRow = $(this); var col1 = currentRow.find("td:eq(1)").html(); var col2 = currentRow.find("td:eq(2)").html(); var col3 = currentRow.find("td:eq(3)").html(); var obj = {}; obj.col1 = col1; obj.col2 = col2; obj.col3 = col3; if (currentRow.find(".chk").is(":checked")) { aData.push(obj); } }); console.log(aData); }); }); </script> </body> </html>
➤ Run / View
Result :