点击添加按钮时重复行 [英] Repeat row when clicked on ADD button
问题描述
当我点击添加按钮使用时，我想要重复和新闻 jQuery javascript 。它重复但重复两次。但我只想重复一次，也删除按钮不工作，我的意思是当我点击删除按钮没有任何行动。
需要帮助，这里是我的代码，
HTML
< table align =centercellpadding =0cellspacing =0border =0width =600class =test>
< tr>
< td>
< form id =formtwoname =formonemethod =postenctype =multipart / form-data>
< table width =100％>
< tbody>
< tr>
< td>< h3>新闻< / h3>< / td>< td>< input type =textreadonly =readonlyvalue =1name =newsidid =newsletter/>< / td>
< / tr>
< tr>
< td>新闻标题：< / td>
< td>< input type =textname =newstitle/>< br />< br />< / td>
< / tr>
< tr>
< td>说明：< / td>
< td>< textarea rows =5cols =30name =description>< / textarea>< br />< br /> < / TD>
< / tr>
< tr>
< td>链接标题：< / td>
< td>< input type =textname =titleoflink/>< br />< br />< / td>
< / tr>
< tr>
< td>新闻网址：< / td>
< td>< a href =＃>< input type =textname =urlofnews/>< br />< br />< / a> ;< / TD>
< / tr>
< tr>
< td>新闻图片：< / td>
< td>< input type =filename =fileToUploadid =fileToUpload>< br />< br /> < / TD>
< / tr>
< tr>
< td>< / td>
< td align =right>< input class =addtype =buttonvalue =Add/>< input class =removetype =buttonvalue = remove/>< / td>
< / tr>
< / tbody>
< / table>
< / form>
< / td>
< / tr>
< / table>
JS
< $（$。$）$（$。$）$（$。$）$（$。$） ）.append（'< table width =600align =center>< tbody>< tr>< td>< h3>新闻< / h3>< / td>< td> < input type =textreadonly =readonlyvalue =1name =newsidid =newsletter/>< / td>< / tr>< tr>< td>新闻：< / td>< td>< input type =textname =newstitle/>< / tr>< br />< / td>< / tr> < tr>< td>描述：< / td>< td>< / textarea>< br />< textarea rows =5cols =30 < / td>< / tr>< tr>< td>标题的链接：< / td>< td>< input type =textname =titleoflink />< / td>< / tr>< tr>< td>新闻网址：< / td>< td>< a href =＃>< input type =textname =urlofnews/>< br < / t>< / td>< / tr>< tr>< td>新闻图片：< / td>< td>< input type =文件name =fileToUploadid =fileToUpload>< br />< br />< / td>< / tr>< tr>< td>< / td><< ; td align =right>< input class =addtype =buttonvalue =Add/>< input class =removetype =buttonvalue =remove/> ;< / TD>< / TR>< / tbody的>< /表>'）;
}）;
}）;
$（'。remove'）。click（function（）{
if（$（。test tr）。length！= 2）
{
$（ .test tr：last-child）。remove（）;
}
else
{
alert（你不能删除第一行）;
}
}）;
当添加到新的时候，您应该调用remove和add再次行动。创建一个remove函数，然后调用像这样的remove函数：
$（document）.ready（function（）{
removeAdd（）;
}）;
函数removeAdd（）{
$（'。add'）。click（function（）{
$（。test）。append（'< table width =600align =center>< tbody>< tr>< td>< h3>新闻< / h3>< / td>< td>< input type =textreadonly =readonlyvalue =1name =newsidid =newsletter/>< / td>< / tr>< tr>< td>新闻标题：< / td>< ; td>< input type =textname =newstitle/>< br>< br>< td>描述：< / td>< td>< textarea rows =5cols =30name =description>< / textarea>< br />< br /> < td>< / tr>< tr>< td> Link of Title：< / td>< td>< input type =textname =titleoflink/>< br /> < br />< / td>< / tr>< tr>< td>新闻网址：< / td>< td>< a href =＃>< input < tr>< td>新闻>< image：< / td>< td>< input type =filename =fileToUploadid =fileToUpload>< br />< br />< / td>< / tr>< tr>< td>< / td>< td align =right>< input class =addtype =buttonvalue =Add/>< input class =removetype =buttonvalue =remove/>< / td>< / tr>< / tbody>< / table>'）;
removeAdd（）;
}）;
$ b $（'。remove'）。click（function（）{
if（$（。test tr）。length！= 2）
{
$（。test tr：last-child）。remove（）;
}
else
{
alert（你不能删除第一行 ）;
}
removeAdd（）;
}）;}
I want to have my news section repeats when i click on add button using jQuery and javascript. it repeats but repeats twice. but i want to repeat it only once, also remove button is not working i mean when i click on remove button there is no action.
need help here is my code,
HTML
<table align="center" cellpadding="0" cellspacing="0" border="0" width="600" class="test" >
<tr>
<td>
<form id="formtwo" name="formone" method="post" enctype="multipart/form-data">
<table width="100%">
<tbody>
<tr>
<td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter" /></td>
</tr>
<tr>
<td>Title of news:</td>
<td><input type="text" name="newstitle" /><br /><br /></td>
</tr>
<tr>
<td>Description:</td>
<td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /> </td>
</tr>
<tr>
<td>Title of Link:</td>
<td><input type="text" name="titleoflink" /><br /><br /></td>
</tr>
<tr>
<td>URL of News:</td>
<td><a href="#"><input type="text" name="urlofnews" /><br /><br /></a></td>
</tr>
<tr>
<td>News image:</td>
<td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /> </td>
</tr>
<tr>
<td></td>
<td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</table>
JS
$(document).ready(function(){
$('.add').click(function() {
$(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter" /></td></tr><tr><td>Title of news:</td><td><input type="text" name="newstitle" /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink" /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews" /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
});
});
$('.remove').click(function() {
if($(".test tr").length != 2)
{
$(".test tr:last-child").remove();
}
else
{
alert("You cannot delete first row");
}
});
When add to new, you should call remove and add action again. Create a remove function then call remove function like this:
$(document).ready(function(){
removeAdd();
});
function removeAdd(){
$('.add').click(function() {
$(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter" /></td></tr><tr><td>Title of news:</td><td><input type="text" name="newstitle" /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink" /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews" /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
removeAdd();
});
$('.remove').click(function() {
if($(".test tr").length != 2)
{
$(".test tr:last-child").remove();
}
else
{
alert("You cannot delete first row");
}
removeAdd();
});}
这篇关于点击添加按钮时重复行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
