首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery兑现表格行动态增删

2012-10-07 
jquery实现表格行动态增删script srcjquery-1.5.1.min.js/scriptscript$(document).ready(func

jquery实现表格行动态增删

<script src="jquery-1.5.1.min.js"></script><script>$("document").ready(function(){var tr;//用于药品显示行保存副本//增加药品显示行$("input#add").click(function(){//当药品行没有全删,则直接复制行,全删时,则用副本复制行if(tr==null)$("#detail").clone().appendTo($("#mytable"));elsetr.clone().appendTo($("#mytable"));});//全选中药品显示行$(":checkbox#all").click(function(){$("input[type=checkbox]").attr("checked",$("input#all").attr("checked"));});//删除所选药品显示行$(":button#btnDel").click(function(){tr=$("#detail").clone();//保存第一行副本,防止全删时无法复制行$("input:checked[id!=all]").parent().parent().remove();//除标题行外,删除所有所选行   });});</script>

?

<input type="button" id="add" value="增加药品" />    <input type="button" id="btnDel" value="删除所选" />  <br />  <br />    <table width="650" border="0" id="mytable">        <tr align="center">        <td width="34" align="left"><input type="checkbox" id="all" /></td>        <td width="113" align="center">药名</td>        <td width="75" align="center">规格</td>        <td width="80" align="center">数量</td>        <td width="76" align="center">单价</td>        <td width="83" align="center">生产日期</td>        <td width="74" align="center">生产批次</td>        <td width="81" align="center">失效日期</td>        </tr>        <tr id="detail">        <td width="34"><input type="checkbox"/></td>            <td width="113"><input name="medicineName" type="text" size="15"/></td>            <td width="75"><input name="type" type="text" size="10"/></td>            <td width="80"><input name="amount" type="text" size="10"/></td>            <td width="76"><input name="price" type="text" size="10"/></td>            <td width="83"><input name="productionTime" type="text" size="10"/></td>            <td width="74"><input name="produtionBatch" type="text" size="8"/></td>          <td width="81"><input name="expires" type="text" size="10"/></td>        </tr>    </table>
?

热点排行