javascript jquery 动态添加删除行 (兼容所有浏览器)
2013-01-29 00:00
597 查看
实现思路:解决name名称不能修改,索引位置困扰,动态添加的行表单域value获取不到值问题
/**重置name索引**/
function resetNameIndex(tableId,paraNames){
var html=$("#"+tableId).formhtml();
var tabTrLen=$("#"+tableId).find("tbody tr");
for(var j=0;j<paraNames.length;j++){
for(var i=0;i<tabTrLen.length;i++){
html = html.replace(paraNames[j],paraNames[j].replace("[]","["+i+"]"));
}
}
$("#"+tableId).html(html);
}
function addRow(tableId){
$("#"+tableId+" tbody tr:last").clone(true).insertBefore($("#"+tableId+" tbody tr:last"));
$("#"+tableId+" tbody tr:last").find("input").val("");
}
function delRow(th){
if($(th).parents("table").find("tbody tr").length<2)
alert("不能全部删除!");
else
$(th).parents("tr").remove();
}
/**处理特殊字符(用于jquey特殊id或name取对象)**/
String.prototype.resetStr = function(){
var newStr="";
if(this){
newStr=this.replace("[","\\[").replace("]","\\]").replace(".","\\.");
}
return newStr;
}
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function() {
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
})(jQuery);
==========
<table id="tab">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="psg[].name"/></td>
<td><select name="psg[].sex"><option>11</option><option>22</option></select></td>
<td><a onclick="delPsg(this);">Ⅹ</a></td>
</tr>
</tbody>
</table>
<script>
var paras=new Array("psg[].name","psg[].sex");
resetNameIndex("tableid",paras);
</script>
/**重置name索引**/
function resetNameIndex(tableId,paraNames){
var html=$("#"+tableId).formhtml();
var tabTrLen=$("#"+tableId).find("tbody tr");
for(var j=0;j<paraNames.length;j++){
for(var i=0;i<tabTrLen.length;i++){
html = html.replace(paraNames[j],paraNames[j].replace("[]","["+i+"]"));
}
}
$("#"+tableId).html(html);
}
function addRow(tableId){
$("#"+tableId+" tbody tr:last").clone(true).insertBefore($("#"+tableId+" tbody tr:last"));
$("#"+tableId+" tbody tr:last").find("input").val("");
}
function delRow(th){
if($(th).parents("table").find("tbody tr").length<2)
alert("不能全部删除!");
else
$(th).parents("tr").remove();
}
/**处理特殊字符(用于jquey特殊id或name取对象)**/
String.prototype.resetStr = function(){
var newStr="";
if(this){
newStr=this.replace("[","\\[").replace("]","\\]").replace(".","\\.");
}
return newStr;
}
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function() {
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
})(jQuery);
==========
<table id="tab">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="psg[].name"/></td>
<td><select name="psg[].sex"><option>11</option><option>22</option></select></td>
<td><a onclick="delPsg(this);">Ⅹ</a></td>
</tr>
</tbody>
</table>
<script>
var paras=new Array("psg[].name","psg[].sex");
resetNameIndex("tableid",paras);
</script>
相关文章推荐
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
- 关于从后台传来的json数据,使用jquery动态展现所有的item,给每个item添加删除功能
- Javascript中动态添加,删除event,兼容IE,FF
- JavaScript(jQuery)动态添加/删除html列表
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- jquery实现动态添加控件,删除控件,页面性能优化
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
- javascript对talbe进行动态添加、删除、验证实现代码
- JavaScript跨浏览器的添加删除事件绑定函数
- JavaScript 动态删除/添加HTML表单元素
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
- JavaScript---动态添加删除属性与方法和对象构造方法
- JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
- jQuery动态添加删除select项
- jQuery ZeroClipboard 复制到剪贴板功能,兼容所有浏览器
- jQuery表格操作添加行、删除行和动态移动
- javascript兼容添加与删除事件监听
- jquery 动态添加、按顺序添加input文本框并且实现删除操作