jq遍歷table表demo
阿新 • • 發佈：2018-05-20
table tr meta utf-8 ati col ble height PE title
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="./jquery.min.js"></script> <style> table { margin: 0 auto; } .bottm { width: 70px; height: 30px; background-color: #447fec; color: #fff; text-align: center; line-height: 30px; margin:0 auto; } </style> </head> <body> <table> <tr> <td class="one1"> <input type="text"> </td> <td class="one2"> <input type="text"> </td> <td class="one3"> <input type="text"> </td> </tr><tr> <td class="one1"> <input type="text"> </td> <td class="one2"> <input type="text"> </td> <td class="one3"> <input type="text"> </td> </tr><tr> <td class="one1"> <input type="text"> </td> <td class="one2"> <input type="text"> </td> <td class="one3"> <input type="text"> </td> </tr> </table> <div class="bottm">提交</div> <script> $(function () { $(‘.bottm‘).on(‘click‘,function () { $(‘table tr‘).each(function(index){//遍歷所有tr元素 var data = [ $(this).find(‘td‘).eq(0).find(‘input‘).val(), $(this).find(‘td‘).eq(1).find(‘input‘).val(), $(this).find(‘td‘).eq(2).find(‘input‘).val(), ]; console.log(data); }) }); }) </script> </body> </html>
jq遍歷table表demo