使用JQuery添加或删除表单元素 [英] Using JQuery to add or remove form elements
问题描述
我一直在尝试使用JQuery来添加或减少表单输入字段。
这是我到目前为止的内容：
<$>我已经使用了一个我发现的例子作为出发点。 p $ p>
< script type =text / javascript>
$（函数（）{
//为新行ID启动计数器
//将其设置为现有行的
//
var newRowNum = 2;
//将点击事件绑定到添加链接
$（'＃addnew'）。click（function（）{
//递增计数器
newRowNum + = 1;
//获得整个添加行 -
//this指向单击元素
//和 parent将选择向上移动
//到DOM
中的父节点var addRow = $（this）.parent（）。parent（）;
// copy
//带有clone的整行
var newRow = addRow.clone（）;
//设置输入值
/ /在添加行中清空字符串
$（'input'，addRo w）的.VAL（）;
$（'name'，addRow）.val（'os'+ newRowNum）;
//替换添加链接的HTML
//用新的行号
$（'td：first-child'，newRow）.html（' < input type =hiddenname =on'+ newRowNum +'value =Email Address'+ newRowNum +'> Recipient'）;
//在最后一个单元格中插入删除链接
$（'td：last-child'，newRow）.html（'< a href =class =remove >删除< \ / A>'）;
//遍历新行中的输入
//并更新ID和名称属性
$（'input'，newRow）.each（function（i） {
var newID ='os'+ newRowNum;
$（this）.attr（'id'，newID）.attr（'name'，newID）;
}）;
//将新行插入表中
//之前添加行
addRow.before（newRow）;
//将删除函数添加到新行
$（'a.remove'，newRow）.click（function（）{
$（this）.parent（ ）.parent（）。remove（）;
返回false;
}）;
//防止默认点击
返回false;
}）;
}）;
< / script>
html如下：
<表>
< tr>< td>
电子邮件地址< / td>< td>& nbsp;< / td>
< td>& nbsp;< / td>
< / tr>
< tr>
< td>< input type =hiddenname =on2value =电子邮件地址1>< a id =addnewhref =>添加< / a><< ; / td>< td>< input name =os2type =textid =os2value =size =24maxlength =60/>< / td>
< td>& nbsp;< / td>
< / tr>
< / table>
我对此感到困惑的是，当我看着浏览器中的页面时，额外的输入字段，但是当我查看源代码时，无法找到额外字段的代码。
有人可以给我启发吗？
$ b $ Dave
我对此感到困惑的是，为什么当
看着浏览器中的页面时，我
看到额外的输入字段，但是当我
查看源代码时，无法找到
额外字段的代码。
这是因为浏览器在加载页面时只显示DOM。
您需要 Firebug 或 Web开发者工具栏 （都是Firefox插件），然后你可以看到jQuery做了什么来修改你的DOM。
编辑：还有一个用于Internet Explorer的Webdeveloper工具栏。
I have been trying to get a function working with JQuery to add or subtract form input fields. I have been using an example I found as a starting point.
Here is what I have so far:
<script type="text/javascript">
$(function(){
// start a counter for new row IDs
// by setting it to the number
// of existing rows
var newRowNum = 2;
// bind a click event to the "Add" link
$('#addnew').click(function(){
// increment the counter
newRowNum += 1;
// get the entire "Add" row --
// "this" refers to the clicked element
// and "parent" moves the selection up
// to the parent node in the DOM
var addRow = $(this).parent().parent();
// copy the entire row from the DOM
// with "clone"
var newRow = addRow.clone();
// set the values of the inputs
// in the "Add" row to empty strings
$('input', addRow).val('');
$('name', addRow).val('os' + newRowNum);
// replace the HTML for the "Add" link
// with the new row number
$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + 'value="Email Address ' + newRowNum + '>Recipient');
// insert a remove link in the last cell
$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
// loop through the inputs in the new row
// and update the ID and name attributes
$('input', newRow).each(function(i){
var newID = 'os' + newRowNum;
$(this).attr('id',newID).attr('name',newID);
});
// insert the new row into the table
// "before" the Add row
addRow.before(newRow);
// add the remove function to the new row
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
return false;
});
// prevent the default click
return false;
});
});
</script>
The html is as follows:
<table>
<tr><td>
Email Addresses</td><td> </td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td>
<td> </td>
</tr>
</table>
What I am confused about is why, when I look at the page in the browser, I see the extra input fields, but when I look at the source, the code for the extra fields are nowhere to be found.
Can someone enlighten me on this?
Dave
What I am confused about is why, when I look at the page in the browser, I see the extra input fields, but when I look at the source, the code for the extra fields are nowhere to be found.
That is becausethe browser shows you only the DOM as when the page is loaded.
You need Firebug or Webdeveloper Toolbar (both Firefox Add-ons), and then you can see what jQuery did to modify your DOM.
Edit: there is also a Webdeveloper Toolbar for Internet Explorer.
这篇关于使用JQuery添加或删除表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
