JQUERY大侠们帮俺看看这段代码，有点小毛病怎么改

发布于 2022-09-08 04:04:02 字数 17227 浏览 10 评论 0

在FIREFOX中点添加按钮，可以在第一个表中添加行并且给第一列加上序号，点击每行的删除按钮可以删除此行，并对序号列重新排序，
现在有点小毛病，就是当第一个表添加到3、4行以上时，按浏览器的刷新，然后会在第二个表中某两个INPUT中出现数字，找了N久也没找到是哪的问题。

哪位JQUERY大侠搭把手。先谢谢了。

代码如下：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//取得BODY体第一行中所有INPUT的ID，赋给数组id_array
row_first_input = $("tr#model_tr:first").find("input");
id_array = new Array();
row_first_input.each(function(a){
id_array[a]=$(this).attr("id");
});
// 重排行号
recount();
/**
* 添加行
*
**/
$("button[id='insert']").click(function(){
// 选择源
old = $("#model_tr");
// 得到复制结果(连事件一起复制)
nobj = old.clone(true);
// 从尾部加入tbody
$("#main_table").append(nobj);
recount();
});
/**
* --删除行
*
**/
$("button[id='delrow']").click(function(){
// 取得父元素的父元素
b = $(this).parent().parent();
// 删除
b.remove();
recount();
});
/**
* --重排
*
* 排列行的序号和各行的input名称
* 如果行数为1最后的删除按钮不显示
**/
function recount(){
// 取得ID为model_tr的所有行
model_trs = $("tr#model_tr");
// each中function的参数为变量数组c的索引
// 循环行
model_trs.each(function(a){
aa = $(this);
if(model_trs.length==1){
$(this).find("button").hide();
}else{
$(this).find("button").show();
}
$(this).css("background-color",['#ccc','#fff'][(a+1)%2]);
inputs = $(this).find("input");
var id = a+1;
inputs.first().attr("value",id);
// 循环列并修改input的id
inputs.each(function(b){
$(this).attr("id",id_array[b]+id);
});
});
// 绑定input回车换焦点
$("input:text:first").focus();
var $inp = $("input:text");
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
}
/**
* 绑定所有数字输入框
*
**/
$("input[class='number']").keyup(function(){
var tmptxt=$(this).val();
//得到第一个字符在结尾判断是否为负号
var t=tmptxt.charAt(0);
//先把非数字的都替换掉，除了数字和.
tmptxt=tmptxt.replace(/[^d.]/g,"");
//必须保证第一个为数字而不是.
tmptxt=tmptxt.replace(/^./g,"");
//保证只有出现一个.而没有多个.
tmptxt=tmptxt.replace(/.{2,}/g,".");
//保证.只出现一次，而不能出现两次以上
tmptxt=tmptxt.replace(".","$#$").replace(/./g,"").replace("$#$",".");
//如果第一位是负号，则允许添加
if(t == '-'){
tmptxt='-'+tmptxt;
}
$(this).val(tmptxt);
}).bind("paste",function(){
var tmptxt=$(this).val();
//得到第一个字符在结尾判断是否为负号
var t=tmptxt.charAt(0);
//先把非数字的都替换掉，除了数字和.
tmptxt=tmptxt.replace(/[^d.]/g,"");
//必须保证第一个为数字而不是.
tmptxt=tmptxt.replace(/^./g,"");
//保证只有出现一个.而没有多个.
tmptxt=tmptxt.replace(/.{2,}/g,".");
//保证.只出现一次，而不能出现两次以上
tmptxt=tmptxt.replace(".","$#$").replace(/./g,"").replace("$#$",".");
//如果第一位是负号，则允许添加
if(t == '-'){
tmptxt='-'+tmptxt;
}
$(this).val(tmptxt);
}).css("ime-mode", "disabled");
});
</script>
<style type="text/css">
table {/*
border-collapse: 1px;
border-spacing: 3px;
border:0px;*/
}
td, th {/*
border:0px;*/
}
input {
width:100%;
height:15px;
border: none;
border-bottom:1px solid #000;
background:transparent; /*输入框景背景透明*/
}
.row_id {
width:15px;
border:0px;
text-align:right;
}
.noborder {
border:0px;
}
.number {
text-align:right;
}
</style>
<h2>This is a heading</h2>
<table border="0">
<thead>
<tr>
<th>序</th><th>科目编码</th><th>科目名称</th><th>借方金额</th><th>贷方金额</th><th>操作</th>
</tr>
</thead>
<tbody id="main_table">
<tr id="model_tr">
<td><input type="text" id="r_id" class="row_id" readonly></input></td>
<td><input type="text" id="kmbm"></input></td>
<td><input type="text" id="kmmc" readonly></input></td>
<td><input type="text" id="jfje" class="number"></input></td>
<td><input type="text" id="dfje" class="number"></input></td>
<td><button type="botton" id="delrow">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class="number noborder">合计</td>
<td class="number"></td>
<td class="number"></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="number noborder">差额</td>
<td class="number"></td>
<td class="number"></td>
<td><button type="button" id="insert">添加</button></td>
</tr>
</tfoot>
</table>
<div>
<table border="1" id="sr">
<tbody id="other">
<tr>
<th>科目名称</th><td colspan="3"><input type="text" value="" id="sr_kmmc"></input></td>
</tr>
<tr>
<th>摘要</th><td width="30%"><input type="text" value="" id="sr_zy"></input></td>
<th>数量</th><td width="30%"><input type="text" value="" class="number" id="sr_sl"></input></td>
</tr>
<tr>
<th>子目项</th><td><input type="text" value="" id="sr_zmx"></input></td>
<th>单价</th><td><input type="text" value="" class="number" id="sr_dj"></input></td>
</tr>
<tr>
<th>细目项</th><td><input type="text" value="" id="sr_xmx"></input></td>
<th>外币单价</th><td><input type="text" value="" class="number" id="sr_wbdj"></input></td>
</tr>
<tr>
<th>部门项</th><td><input type="text" value="" id="sr_bmx"></input></td>
<th>外币金额</th><td><input type="text" value="" class="number" id="sr_wbje"></input></td>
</tr>
<tr>
<th>商品项</th><td><input type="text" value="" id="sr_spx"></input></td>
<th>收付日期</th><td><input type="text" value="" id="sr_sfrq"></input></td>
</tr>
<tr>
<th>客户项</th><td><input type="text" value="" id="sr_khx"></input></td>
<th>支票号码</th><td><input type="text" value="" id="sr_zphm"></input></td>
</tr>
<tr>
<th>人员项</th><td><input type="text" value="" id="sr_ryx"></input></td>
<th>发票号码</th><td><input type="text" value="" id="sr_fphm"></input></td>
</tr>
<tr>
<th>外币项</th><td><input type="text" value="" id="sr_wbx"></input></td>
</tr>
<tr>
<th>备注</th><td><input type="text" value="" id="sr_bz"></input></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>