动态添加行点击自动填充内容

wqb139 2015-10-25 04:03:09

先上代码：

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html lang="en">
<head>
<title>动态添加行点击自动填充内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="js/mycommon.js"></script>
<script type="text/javascript">

function doit(){
var t2=document.getElementById("txtKhks").value;
var t1=txtJtph.value+"号机"; title.value=t1+t2;
}

function AddRow()
{
var v=$("#tbin");
var vcount=$("#tbin tr").filter(".MyRow").size()+1;
var vTr=$("#tbin #trDataRow1");
var vTrClone=vTr.clone(true);
vTrClone.attr("id",vcount);
vTrClone.appendTo(v);
vtxtJtph=vTrClone.find("#txtJtph");
vtxtJtph.val(""); vtxtCpks=vTrClone.find("#txtKhks");
vtxtCpks.val("");
vtitle=vTrClone.find("#title");
vtitle.val("");
}
</script>
</head>
<body>
<form name="tfrm">

<table cellpadding="0" cellspacing="0" border="0" id="TABLE1" width="400">
<tr >
<td >
<table id="tbin" border="1" bordercolor="#CBDFF2" style="border-collapse:collapse;table-layout:fixed;" width="100%" class="tableRow">

<tr id="trHead" class="HeadStyle" >
<td>标题</td>
<td>编号</td>
<td>员工姓名</td>
<td>操作</td>
</tr>
<tr id="trDataRow1" class="MyRow">
<td id="tc1" align="center">
<input name="title" type="text" id="title" class="input" style="width:80px;"/></td>
<td id="tc2" align="center">
<div class="jtph">
<select name="txtJtph" id="txtJtph" class="jtph1" style="width:80px;" onChange="javascript:doit(this.form);"><option value="5">5</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div>
</td>
<td id="tc3" align="center">
<input name="txtKhks" type="text" id="txtKhks" class="input" style="width:80px;" onChange="javascript:doit(this.form);" /> </td>
<td id="tcDel" align="center">
<input type="button" name="btnDel" value="删除" id="btnDel" class="buttonwhite_60_23"/>
</td>
</tr>

</table>
</td>
</tr>
<tr >
<td >
<input type="button" name="btnAdd" value="增加行" accesskey="a" id="btnAdd" class="buttonwhite_60_23" />
</td>
</tr>
</table>
</form>

<script type="text/javascript" >

$(function()
{
var v=$("#tbin");

$("#btnAdd").bind("click",AddRow);

$("#btnDel").bind("click", function()
{
if (confirm('确认要删除么?')==true)
{

var vcount=$("#tbin tr").filter(".MyRow").size()+1;
if(vcount<=2)
{
alert('请至少保留一行');
return;
}
var vbtnDel=$(this);
var vTr=vbtnDel.parent("td").parent("tr");
if(vTr.attr("id")=="trDataRow1")
{
alert('第一行不能删除!');
return;
}
else
{
vTr.remove();
}
UpdateTotal();
}

});

})

</script>

</body>
</html>

以上是代码

不增加行添加内容后的效果：

先添加内容后增加行的效果：

先增加行后添加内容的效果：

综合以上，增加行后事件无法绑定，导制操作失效，试了很多方法都解决不了问题，希望大家指点一下，谢谢!

...全文

213 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

wqb139 2015-10-26

打赏
举报

果然是doit函数有问题，谢谢“buzzing1991”提供的doit函数，现在可以了，谢谢大家!

天际的海浪 2015-10-26

打赏
举报

doit()函数写的不对 doit()函数是干嘛用的，没看明白

wqb139 2015-10-26

打赏
举报

引用 13 楼 wqb139 的回复:

[quote=引用 11 楼 jslang 的回复:] 用了委托事件，你标签上的事件 onChange="javascript:doit(this.form);"就不要写了看看浏览器的错误信息是什么？是哪一行出错

没有任何提示[/quote]试过，不写没有触发事件，点击后第一行也没效果了

buzzing1991 2015-10-26

打赏
举报

唔，弄错了点上面的var row=$(a).parents("tr") 应该是var row=$(a).parents("tr.MyRow")

wqb139 2015-10-26

打赏
举报

引用 11 楼 jslang 的回复:

用了委托事件，你标签上的事件 onChange="javascript:doit(this.form);"就不要写了看看浏览器的错误信息是什么？是哪一行出错

没有任何提示

buzzing1991 2015-10-26

打赏
举报


function doit(a){
var row=$(a).parents("tr")
var t2=row.find("#txtKhks").val();
var t1=row.find("#txtJtph").val()+"号机"; 
row.find("#title").val(t1+t2);
}

然后把所有doit(this.form)改成doit(this)

天际的海浪 2015-10-26

打赏
举报

用了委托事件，你标签上的事件 onChange="javascript:doit(this.form);"就不要写了看看浏览器的错误信息是什么？是哪一行出错

wqb139 2015-10-26

打赏
举报

补全了js引用地址，加入了“天际的海浪”提供的事件委托代码，可能是doit这个函数写得不对吧，导致还是没效果，大家帮我测试一下，给个修改意见，谢谢! <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html lang="en"> <head> <title>动态添加行点击自动填充内容</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="" type="text/css"/> <script type="text/javascript" src="http://yxxh.gotoftp5.com/js/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript" src="http://yxxh.gotoftp5.com/js/mycommon.js"></script> <script type="text/javascript"> function doit(){ var t2=document.getElementById("txtKhks").value; var t1=txtJtph.value+"号机"; title.value=t1+t2; } function AddRow() { var v=$("#tbin"); var vcount=$("#tbin tr").filter(".MyRow").size()+1; var vTr=$("#tbin #trDataRow1"); var vTrClone=vTr.clone(true); vTrClone.attr("id",vcount); vTrClone.appendTo(v); vtxtJtph=vTrClone.find("#txtJtph"); vtxtJtph.val(""); vtxtCpks=vTrClone.find("#txtKhks"); vtxtCpks.val(""); vtitle=vTrClone.find("#title"); vtitle.val(""); } </script> </head> <body> <form name="tfrm"> <table cellpadding="0" cellspacing="0" border="0" id="TABLE1" width="400"> <tr > <td > <table id="tbin" border="1" bordercolor="#CBDFF2" style="border-collapse:collapse;table-layout:fixed;" width="100%" class="tableRow">  <tr id="trHead" class="HeadStyle" > <td>标题</td> <td>编号</td> <td>员工姓名</td> <td>操作</td> </tr> <tr id="trDataRow1" class="MyRow"> <td id="tc1" align="center"> <input name="title" type="text" id="title" class="input" style="width:80px;" onChange="javascript:doit(this.form);"。。/></td> <td id="tc2" align="center"> <div class="jtph"> <select name="txtJtph" id="txtJtph" class="jtph1" style="width:80px;" onChange="javascript:doit(this.form);"><option value="5">5</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></div> </td> <td id="tc3" align="center"> <input name="txtKhks" type="text" id="txtKhks" class="input" style="width:80px;" onChange="javascript:doit(this.form);" /> </td> <td id="tcDel" align="center"> <input type="button" name="btnDel" value="删除" id="btnDel" class="buttonwhite_60_23"/> </td> </tr> </table> </td> </tr> <tr > <td > <input type="button" name="btnAdd" value="增加行" accesskey="a" id="btnAdd" class="buttonwhite_60_23" /> </td> </tr> </table> </form> <script type="text/javascript" > $(function() { var v=$("#tbin"); $("#btnAdd").bind("click",AddRow); $("#tbin").on("change", "select", function(event){ doit(this.form); }) $("#tbin").on("change", "input[name='txtKhks']", function(event){ doit(this.form); }) $("#tbin").on("change", "input[name='title']", function(event){ doit(this.form); }) $("#btnDel").bind("click", function() { if (confirm('确认要删除么?')==true) { var vcount=$("#tbin tr").filter(".MyRow").size()+1; if(vcount<=2) { alert('请至少保留一行'); return; } var vbtnDel=$(this); var vTr=vbtnDel.parent("td").parent("tr"); if(vTr.attr("id")=="trDataRow1") { alert('第一行不能删除!'); return; } else { vTr.remove(); } UpdateTotal(); } }); }) </script> </body> </html>

wqb139 2015-10-26

打赏
举报

引用 8 楼 jslang 的回复:

[quote=引用 7 楼 wqb139 的回复:] 请问大家在上面的例子中怎样给下拉框和文本框委托事件


$("#tbin").on("change", "select", function(event){
	doit(this.form);
})

$("#tbin").on("change", "input[name='txtKhks']", function(event){
	doit(this.form);
})

[/quote]经测试，问题还是和以前三利现象一样的，是不是doit这个函数有问题的

天际的海浪 2015-10-25

打赏
举报

引用 7 楼 wqb139 的回复:

请问大家在上面的例子中怎样给下拉框和文本框委托事件


$("#tbin").on("change", "select", function(event){
	doit(this.form);
})

$("#tbin").on("change", "input[name='txtKhks']", function(event){
	doit(this.form);
})

wqb139 2015-10-25

打赏
举报

请问大家在上面的例子中怎样给下拉框和文本框委托事件

wqb139 2015-10-25

打赏
举报

引用 5 楼 jslang 的回复:

引用 4 楼 wqb139 的回复:
[quote=引用 2 楼 jslang 的回复:] 事件改成委托方式绑定
可以经个基本的代码吗

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 页面名称 </title> <style type="text/css"> </style> </head> <body> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <ul id="aaa"> <li>1</li> </ul> <input type="button" value="add" onclick="add();" /> <script type="text/javascript"> var n = 1; function add() { $("#aaa").append("<li>"+(++n)+"</li>") } $("#aaa").on("click", "li", function(event){//委托事件只绑定一个，但对新动态添加的元素也有效。 alert($(this).text()); }) </script> </body> </html> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 页面名称 </title> <style type="text/css"> </style> </head> <body> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <ul id="aaa"> <li>1</li> </ul> <input type="button" value="add" onclick="add();" /> <script type="text/javascript"> var n = 1; function add() { $("#aaa").append("<li>"+(++n)+"</li>") } $("#aaa").on("click", "li", function(event){//委托事件只绑定一个，但对新动态添加的元素也有效。 alert($(this).text()); }) </script> </body> </html> [/quote]请问在select中怎样委托事件呢

天际的海浪 2015-10-25