jQuery定义的单击事件不能用的问题

最新推荐文章于 2023-05-31 16:56:02 发布

叁拾-

最新推荐文章于 2023-05-31 16:56:02 发布

阅读量360

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/baidu_38845827/article/details/85894005

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天搞了一波这个代码

<!doctype html>
<html>
  <head>
    <style>
       div{
	     width:30%;
	     border:1px solid blue;
	     margin:20px  auto;
		 text-align:center;
	   }
	   
        #ttt{
		   margin:10px auto;
		   padding:10px;
		   align:center;
		   border-collapse:collapse;
		}
		th,td{
               border:1px solid black;
			  padding:6px 20px;
            }
	
    </style>
    <script src="../jQuery/jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>
	<p>
	    userName: <input type="text" id="name"/>
	</p>
	<p>
	   passWord: <input type="password" id="pwd"/>
	</p>
	<p>
	   <input type="button" id="addTr" value="ADDADD"/>
	</p>
	</div>
	
	<div>
	   <table id="ttt">
	     <thead>
             <tr>
			  <th>name</th>
			  <th>password</th>
			  <th>delete</th>
             </tr>
		 </thead>
		 <tbody>
		 </tbody>
	   </table>
	</div>
	
	<script>
	  $(function(){
         $("#addTr").click(function(){
		    var name=$("#name").val().trim();
		    var pwd=$("#pwd").val().trim();
		   if(name&&pwd){
		   
		    var $tr=$("<tr></tr>");
		    var $td1=$("<td>"+name+"</td>");
		    var $td2=$("<td>"+pwd+"</td>");
            var $but=$("<input type='button' value='delete' onclick='ka(this);'/>");
	    	var $td3=$("<td></td>");
		 
		    $td3.append($but);
			$tr.append($td1);
			$tr.append($td2);
			$tr.append($td3);
			
			$("#ttt").append($tr);
		   }
		    else
			{
			  alert("Please inupt content");
			}
		 });    
	  });
	  
       function ka(a){
		 var p=$(a).parent();
		 var tr=p.parent();
		 tr.remove();
	   }
	</script>
  </body>
</html>

这段代码就是你简单的一个往table里增加删除行的功能。本来感觉很快就搞完但是花了挺长时间主要原因是写的时候有小错误，很难找还有就是自动生成的删除按钮本来是打算给它添加class 然后用类选择器读定义删除事件，但是没有响应很神奇我就只定义事件的函数名称了，还有 $("#a").parent() 还是jQuery对象

叁拾-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery定义的单击事件不能用的问题

今天搞了一波这个代码&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;style&gt; div{ width:30%; border:1px solid blue; margin:20px auto; text-align:center; } ...
复制链接

扫一扫