Heim > Artikel > Backend-Entwicklung > php对表格进行批量操作如全选反选删除功能,php全选_PHP教程
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>Select All</title> <style><span> table{ border</span>:<span>#</span><span>999 1px solid;</span> border-collapse:<span>collapse; } table th{ text</span>-align:<span>center; } table td{ border</span>:1px solid <span>#</span><span>999;</span> text-align:<span>center; } </span>.<span>one{ background</span>:<span>#</span><span>6cf;</span> <span> } </span>.<span>two{ background</span>:<span>#</span><span>fc6;</span> <span> } </span></style> <script type="text/javascript" language="javascript"> <span>function</span><span> changecolor(){ </span><span>var</span> tr=document.getElementsByTagName("tr"<span>); tr[</span>0].style.background="#0066ff"<span>; tr[tr</span>.length-1].style.background="#0066ff"<span>; } </span><span>function</span><span> changebox(type) { </span><span>var</span> tbs = document.getElementById("tbs"<span>); </span><span>var</span> chks = tbs.getElementsByTagName("input"<span>); </span><span>switch</span><span> (type) { </span><span>case</span> "qx": <span>for</span> (<span>var</span> i = 0; i < chks.length; i++<span>) { chks[i]</span>.checked = <span>true</span><span>; } </span><span>break</span><span>; </span><span>case</span> "qxx": <span>for</span> (<span>var</span> i = 0; i < chks.length; i++<span>) { chks[i]</span>.checked = <span>false</span><span>; } </span><span>break</span><span>; </span><span>case</span> "fx": <span>for</span> (<span>var</span> i = 0; i < chks.length; i++<span>) { </span><span>if</span> (chks[i].checked == <span>true</span><span>) { chks[i]</span>.checked = <span>false</span><span>; } </span><span>else</span><span> { chks[i]</span>.checked = <span>true</span><span>; } } </span><span>break</span><span>; } } </span><span>function</span><span> del(){ </span><span>var</span> input=document.getElementsByName("check[]"<span>); </span><span>for</span>(<span>var</span> i=input.length-1; i>=0; i--<span>){ </span><span>if</span>(input[i].checked==<span>true</span><span>){ </span><span>var</span> td=input[i].<span>parentNode; </span><span>var</span> tr=td.<span>parentNode; </span><span>var</span> table=tr.<span>parentNode; table</span>.<span>removeChild(tr); } } } </span></script> </head> <body onload="changecolor()"> <table width="400" border="0" align="center"> <tr> <th>选项</th> <th>发件人</th> <th>邮件名称</th> <th>邮件附属信息</th> </tr> <tbody id="tbs"> <tr <span>class</span>="one"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="two"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="one"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="two"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="one"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="two"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr <span>class</span>="one"> <td><input type="checkbox" name="check[]"></td> <td>王大力</td> <td>wdl@qq.com</td> <td>个人邮箱</td> </tr> <tr> <th>选项</th> <td colspan="3" align="center"> <input type="button" id="qx" onclick="changebox('qx')" value="全选"> <input type="button" id="qxx" onclick="changebox('qxx')" value="取消全选"> <input type="button" id="fx" onclick="changebox('fx')" value="反选"> <input type="button" id="del" onclick="del()" value="删除选选附件"> </td> </tr> </tbody> </table> </body> </html>