<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JS-demo01.html:JS动态的添加和删除</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
/*
*@author Roin.li
*@time 2012-02-15 12:16:00
*@decription <input type="text">实现动态的js"添加","删除"
*/
function toFpcyAdd(){// 添加
//var trSize = $("#fpcyTable").find("tr:gt(2)").size();
var trSize = $("#fpcyTable").find("tr:gt(2)").length;
if(trSize >= 5){
alert("添加数据不能超过5条");
return;
}
$("#fpcyTable").find("tr:eq(3)").clone(true).appendTo($("#fpcyTable")).find("input[type='text']").val("").end().find("td:eq(0)").text(trSize + 1).end().find("input:eq(0)").focus();
}
function toFpcyDelete(obj){// 删除
debugger;
var $objparents = $(obj).parents("tr:eq(0)"); // parents的祖先元素是? 是table吗? 不是，看错了，input后面还有个td呢，td之后是tr,所以tr是祖先元素
var textvalue = $objparents.find("td:eq(0)").text();
var trsize = $("#fpcyTable tr:gt(2)").size();
if(trsize > 1){
$objparents.nextAll("tr").each(function(index,item){
$(item).find("td:eq(0)").text(textvalue - 0 + index);
})
$objparents.remove();
}
//alert(111);
//var textValue = $(this).find("tr:eq(0)").text
//alert(textValue);
}
</script>
</head>
<body>
<table class="commandTable" cellspacing="0px" id="fpcyTable">
<tr><td class="mb_tit_1" colspan="5"></td></tr>
<tr><td class="tableCaption" colspan="5">查验条件列表</td></tr>
<tr><td class="tableTitle" align="center">序号</td><td class="tableTitle">发票代码</td><td class="tableTitle">发票号码</td><td class="tableTitle">操作</td></tr>
<tr>
<td class="td_02">1</td>
<td class="td_02"><input type="text" size="20" name="nfpdm"/></td>
<td class="td_02"><input type="text" size="20" name="nfphm"/></td>
<td class="td_02"><a href="javascript:void(0)"><input type="button" id="toFpcyDelete" value="删除" onclick="toFpcyDelete(this)"/><!-- <img title="删除" alt="删除" src="<c:out value="${pageContext.request.contextPath}"/>/images/table/docdelete.gif" border="0" onclick="javascript:gotoDelete(this);" /> --></a></td>
</tr>
</table>
<table><tr><td><input type="button" id="toFpcyAdd" value="添加" onclick="toFpcyAdd()"/></td></tr></table>
</body>
</html>
分享到：
相关推荐
在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其插入到`<tbody>`内来实现的。首先，我们需要创建一个HTML表单，让用户输入新行的数据。然后，当用户提交表单时，捕获这些值并构建新的表格行。以下是一个...
var newInput = $("<input type='text' placeholder='请输入内容'>"); $("#container").append(newInput); }); }); </script> </body> </html> ``` 在这个例子中，我们使用`$(document).ready()`确保页面加载...
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#tab").datagrid({ // width: 600, //宽度 height: 400, //高度 ...
<input type="text" id="new-task" placeholder="请输入新任务..."> <button id="add-task">添加</button> <ul id="task-list"></ul> </body> </html> ``` 接下来，我们要在`todo.js`中编写jQuery脚本来处理用户...
var newRow = $("<tr><td>新姓名</td><td>新年龄</td><td><button class='edit'>编辑</button> <button class='delete'>删除</button></td></tr>"); $("#dataTable tbody").append(newRow); }); ``` 这里，我们...
((i <= 57 && i >= 48) || (i >= 97 && i <= 122) || (i >= 65 && i <= 90) || (i == 95) || (i == 8) || (i == 9) || (i == 37) || (i == 39) || (i == 46))) { // 阻止其他键的输入 window.event.returnValue = ...
<field type="add"> <name>isgroupbuy</name> <type>int</type> <size>1</size> <default>0</default> </field> <field type="drop"> <name>isgroup</name> </field> </action> 3.2.4 创建索引 ...
newRow.append($('<td><input type="text"></td>')); newRow.append($('<td><input type="text"></td>')); // 添加更多td $('#your_table_id').append(newRow); }); ``` 删除功能则需要监听表格中的删除按钮...
<input type="text" name="email" /> <a href="javascript:;" data-repeater-delete>删除</a> </div> </div> ``` ```javascript $(document).ready(function() { $('.group-a').repeater({ // 配置项... ...
var row = $("<tr><td>" + name + "</td><td>" + age + "</td><td>" + city + "</td><td><button class='delete-btn'>删除</button></td></tr>"); $("#data-table tbody").append(row); } ``` 在表格中实现查询...
03. <display-name>s3h3</display-name> 04. <context-param> 05. <param-name>contextConfigLocation</param-name> 06. <param-value>classpath:applicationContext*.xml</param-value> 07. </context-param> ...
var input = $("<input type='text'>"); $("#container").append(input); }); }); ``` 在上面的代码中，`$(document).ready`确保了DOM加载完成后再执行JavaScript。`$("#addInput").click`监听按钮的点击事件，...
<t:basetype="jquery,easyui,tools"></t:base> ``` **1.2. 参数** | 属性名 | 类型 | 描述 | |--------|--------|------------------------------| | type | string | JS插件类型定义，如果有多个以逗号隔开 | **...
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比：<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
var conditionTemplate = $("<div class='condition'><input type='text' placeholder='输入条件'/><button class='delete-condition'>删除</button></div>"); // 添加条件按钮点击事件 $("#add-condition").on(...
if (deleteRows.length>0) { for (var j=0;j<deleteRows.length;j++) { changesRows.deleted.push(deleteRows[j]); } } return changesRows; } function saveListenerConfig(){ if...
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,...
<input type="button" id="delete" name="delete" value="<<移除" /> <br /> <input type="button" id="selectdown" name="selectdown" value="下移∨" /> </td> <td> <select id="select_list" name="select_...
$('<li class="task-item"><input type="checkbox" /> ' + task + '<button class="delete-task">删除</button></li>').appendTo('#task-list'); $('#new-task').val(''); } }); // 删除任务 $('#task-list')...
var $inputs = $('<input type="text">').val($row.find('td:eq(0)').text()), $inputs2 = $('<input type="number">').val($row.find('td:eq(1)').text()); $row.find('td').eq(0).html($inputs); $row.find('...