<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("input").click(function(){ $("table").css("display","none"); $("ul").css("display","block"); var html = "<li>" + $("tr td:nth-child(1):parent:eq(0)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(1):parent:eq(1)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(2):parent:eq(0)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(2):parent:eq(1)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(3):parent:eq(0)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(3):parent:eq(1)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(4):parent:eq(0)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(4):parent:eq(1)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(5):parent:eq(0)").html() + "</li>"; html += "<li>" + $("tr td:nth-child(5):parent:eq(1)").html() + "</li>"; $("ul").html(html); }); }); </script> <style> ul{ display:none; } </style> </head> <body> <p> <input type="button" value="click"> </p> <table border="1"> <tr><td>11111</td><td></td><td></td><td>77777</td><td></td></tr> <tr><td></td><td>33333</td><td></td><td></td><td>99999</td></tr> <tr><td></td><td>44444</td><td>55555</td><td></td><td></td></tr> <tr><td>22222</td><td></td><td></td><td>88888</td><td></td></tr> <tr><td></td><td></td><td>66666</td><td></td><td>00000</td></tr> </table> <ul> </ul> </body> </html>