Jquery 手动添加和删除文本框

三月 22
磊子 2012年 1条评论

今天做项目的时候需要无限制的添加文本框,所以想到使用Jquery 来手动添加和删除文本框,于是磊子把代码拿上来做个总结,以下是全部代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 手动添加和删除文本框</title>
</head>
<script src="jquery-1.6.4.js"></script>
<style>
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>
<body>
<h2><a href="#" id="addScnt">点击添加</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" /></label>
    </p>
</div>
<script>
$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">删除</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

</script>
</body>
</html>

大家在使用的时候记得将juqery库文件导入一下即可。

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » Jquery 手动添加和删除文本框
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

1 条留言 其中:访客:1 条, 博主:0 条

  1. jquery越来越流行了

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站