<strong>ページに js をインポート <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="15073" class="copybut" id="copybut15073" onclick="doCopy('code15073')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code15073"> <br>jquery -1.3.2.min.js<br>jquery.tablednd_0_5.js<br><font style="COLOR: #ff0000">注: 必ず最初に jquery-1.3.2.min.js をインポートしてください。そうしないと、エラーが発生します。 <br></font> </div> <br><strong>・テーブルの作成<br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="6787" class="copybut" id="copybut6787" onclick="doCopy('code6787')"><u>コードをコピー</u></a></span> コードは次のように: </div> <div class="codebody" id="code6787"> <br><table id="table-1" cellpacing="0" cellpadding="2"><br> <tr id="1"><td> ;1< /td><td>1 つ</td><td>いくつかのテキスト</td></tr><br> <tr id="2"><td>2</ td><td>2 つ</td><td>テキスト</td></tr><br> <tr id="3"><td>3</td>< td>3</td><td>テキスト</td></tr><br> <tr id="4"><td>4</td><td>4< /td> <td>テキスト</td></tr><br> <tr id="5"><td>5</td><td>5</td>< ;td> テキスト<br> td></tr><br></table><br> </div> <br><strong>・js コードを挿入<br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="84761" class="copybut" id="copybut84761" onclick="doCopy('code84761')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code84761"> <br><script type="text/javascript"><br> $( document).ready(function() {<br> $("#table-1").tableDnD();<br> });<br> </script><br> </div> <br>·わかりました。 <br><strong>・例<br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="24282" class="copybut" id="copybut24282" onclick="doCopy('code24282')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div> <div class="codebody" id="code24282"> <br><%<BR> String path = request.getContextPath();<BR> String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";<BR> pageContext.setAttribute("basePath", basePath);<BR>%><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><html><br> <head><br> <script type="text/javascript"<BR> src="${basePath}common/js/jquery-1.3.2.min.js"></script><br> <script type="text/javascript"<BR> src="${basePath}common/js/jquery.tablednd_0_5.js"></script><br> <style type="text/css"><br>.aa {<br> background: #00FF99<br>}<br><br>.bb {<br> background: #0066FF<br>}<br></style><br><br><script type="text/javascript"><br><br> $(document).ready(function() { <br> color();<br> $("#table-1").tableDnD({<br> onDrop:function(table,row){<br> var b = $(row).children().eq(0).text();<br> color();<br> } <br> }); <br><br> });<br><br> function color()<br> {<br> var tbody = $("table[id='table-1'] tr");<br> tbody.each(function(index){<br> var cc = index%2;<br> if(0==cc)<br> {<br> $(this).removeClass();<br> $(this).addClass("aa"); <br> }<br> else<br> {<br> $(this).removeClass();<br> $(this).addClass("bb"); <br> }<br> });<br> }<br> </script><br> </head><br><br> <body><br> <table id="table-1" cellspacing="0" cellpadding="2"><br> <tr id="1"><td>1</td><td>One</td><td>some text</td></tr><br> <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr><br> <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr><br> <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr><br> <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr><br> <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr><br> </table><br><br> </body><br></html><br> </div> <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
