jQuery实现在列表的首行添加数据

前端技术 2023/09/01 JavaScript

jQuery中可以通过append在列表的最后添加数据，也可以通过prepend在列表的最前面添加数据

方法很简单：

复制代码 代码如下:

jQuery(\'#comment_list\').prepend(\'<li>hello www.phpstudy.net</li>\');

另外附上jquery实现连续向textarea文本域添加数据的代码。

<%@ page language=\"java\" contenttype=\"text/html; charset=gbk\" pageencoding=\"gbk\"%>
<%@ include file=\"/pages/common/taglibs.jsp\"%>
<!doctype html public \"-//w3c//dtd html 4.01 transitional//en\" \"http://www.w3.org/tr/html4/loose.dtd\">
<html>
<head>
<script type=\"text/javascript\" src=\"jquery-1.4.js\"></script>
<script type=\"text/javascript\">
  $(document).ready(function(){
    $(\"input[id^=\'buttonvalidate\']\").click(function(){ //当点击所有的id中包含\'buttonvalidate\'的input标签时，执行函数
     var btnval=$.trim($(this).val());//trim函数，去掉空格
     var str = $(\'#textareavalidate\').val() + btnval;//
     $(\'#textareavalidate\').val(str);//
    });
  });
</script>
<title>insert title here</title>
</head>
<body>
<form id=\"form1\" name=\"form1\" action=\"\" method=\"post\">
<table id =\"table1\" class=\"base_table\" cellspacing=\"0\" border=\"1\" style=\"border-collapse: collapse\">
 <tr>
 <td>
 <textarea cols=\"75\" rows=\"5\" id=\"textareavalidate\"></textarea>
 </td>
 </tr>
 <tr id=\"tr1\">
 <td>
 <input id=\"buttonvalidate1\" type=\"button\" value=\" + \"/> 
 <input id=\"buttonvalidate2\" type=\"button\" value=\" - \"/> 
 <input id=\"buttonvalidate3\" type=\"button\" value=\" * \"/>
 <input id=\"buttonvalidate4\" type=\"button\" value=\" / \"/>   
 <input id=\"buttonvalidate5\" type=\"button\" value=\" ! \"/>
 <input id=\"buttonvalidate6\" type=\"button\" value=\" = \"/>
 <input id=\"buttonvalidate7\" type=\"button\" value=\" < \"/>
 <input id=\"buttonvalidate8\" type=\"button\" value=\" > \"/>   
 <input id=\"buttonvalidate9\" type=\"button\" value=\" & \"/>
 <input id=\"buttonvalidate10\" type=\"button\" value=\" | \"/>
 <input id=\"buttonvalidate11\" type=\"button\" value=\" ( \"/>
 <input id=\"buttonvalidate12\" type=\"button\" value=\" ) \"/>
 </td>
 </tr>
</table>
</form>
</body>
</html>

以上实现的功能：点击+，则把+添加到textarea中，点击-，则把-添加到textarea中；

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/1280

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案