목차
回复讨论(解决方案)
웹 프론트엔드 HTML 튜토리얼 表格的增加,删除,和全选。_html/css_WEB-ITnose

表格的增加,删除,和全选。_html/css_WEB-ITnose

Jun 21, 2016 am 08:47 AM

<script></script>

<script> <br /> $(function(){ <br /> //全选 <br /> <br /> //删除数据 <br /> $(".del").click(function(){ <br /> $("tr").remove(); <br /> }); <br /> //新添数据 <br /> $(".newone").click(function(){ <br /> //创建一个新的节点 <br /> var $newPro=$("<tr bgcolor='#FAF3E9'><td><input type='checkbox'/><td>刘家义<td>男<td>6565654315321321<td>钻石<td>15575938043<td>1997-4-26 <td>100000<td><img class='add' src='images/add.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" > <img class='del' src='images/del.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >") <br /> <br /> $("table").append($newPro); <br /> }); <br /> }); <br /> <br /></script>





  
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
  
姓名 性别 卡号 会员级别 电话号码 出生年月日 消费金额  
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    

新增

大神们帮帮忙吧!
怎么样1.当选中一行时,点击删除才删除。
            2.当我选中姓名前面的复选框时,则选中全部的复选框。
            3.为什么当我用  var $newPro=$("tr.ll").html();添加时,一直会向左边添加。    


回复讨论(解决方案)

<style type="text/css" >*{font-size:12px;}tr{text-align:center;height:40px;}</style><script type="text/javascript"> $(function(){         //全选 $("#allselect").click(function(){ $("table :checkbox").prop("checked",$(this).prop("checked")); });  //删除数据 $("table").on("click",".del",function(){ $("table :checkbox:checked").closest("tr").remove(); }); //新添数据 $(".newone").click(function(){ //创建一个新的节点 var $newPro=$("<tr  bgcolor='#FAF3E9'><td><input type='checkbox'/></td><td>刘家义</td><td>男</td><td>6565654315321321</td><td>钻石</td><td>15575938043</td><td>1997-4-26</td> <td>100000</td><td><img   class='add' src='images/add.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" > <img  class='del' src='images/del.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" ></td></tr>")  $("table").append($newPro); }); });</script></head><body><table width="800" border="0" cellspacing="0" cellpadding="0">  <tr bgcolor="#EBE7DC">    <td><input id="allselect" type="checkbox"/></td>    <td>姓名</td>    <td>性别</td>    <td>卡号</td>    <td>会员级别</td>    <td>电话号码</td>    <td>出生年月日</td>    <td>消费金额</td>    <td> </td>  </tr>  <tr bgcolor="#FAF3E9">    <td><input   type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img  class="add lazy"  src="/static/imghw/default1.png"  data-src="images/add.jpg"     / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class="del lazy"  src="/static/imghw/default1.png"  data-src="images/del.jpg"    / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr>  <tr class="ll" bgcolor="#FEFAF7">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img  class="add lazy"  src="/static/imghw/default1.png"  data-src="images/add.jpg"     / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class="del lazy"  src="/static/imghw/default1.png"  data-src="images/del.jpg"    / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr>    <tr bgcolor="#FAF3E9">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img  class="add lazy"  src="/static/imghw/default1.png"  data-src="images/add.jpg"     / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class="del lazy"  src="/static/imghw/default1.png"  data-src="images/del.jpg"    / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr></table><a href="#" class='newone'>新增</a>
로그인 후 복사

请问,哪个添加只能这么写吗?不可以直接提取本身表格的数据吗?

请问,哪个添加只能这么写吗?不可以直接提取本身表格的数据吗?


添加功能你想怎么做?

就是用var $newPro=$("tr.ll").html();
直接去获取已经存在的表格信息,但是这样获取,他会一直向左浮动。

就是用var $newPro=$("tr.ll").html();
直接去获取已经存在的表格信息,但是这样获取,他会一直向左浮动。


var $newPro=""+$("tr.ll").html()+"";

删除不应该把第一段也删了吧

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법 inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법 Mar 13, 2024 pm 02:00 PM

컴퓨터의 C 드라이브에 메모리를 많이 차지하는 inetpub 폴더가 있는 것으로 나타났습니다. 이 inetpub 폴더는 무엇인가요? 바로 삭제가 가능한가요? 실제로 inetpub는 IIS 서버의 폴더입니다. IIS의 전체 이름은 인터넷 정보 서비스(Internet Information Services)입니다. 웹 사이트를 구축하고 디버깅하는 데 사용할 수 있으며, 필요하지 않으면 제거할 수 있습니다. 구체적인 방법은 다음과 같습니다. 1. 시작 메뉴를 마우스 오른쪽 버튼으로 클릭하고 "프로그램 및 기능"을 선택합니다. 2. 실행 후 "Windows 기능 켜기/끄기"를 클릭합니다. 3. Windows 기능 목록에서 II를 선택 취소합니다.

Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 메모를 삭제하는 방법 Mar 21, 2024 pm 08:12 PM

Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 앱에서 메모를 편집할 수 있습니다. 다음으로 편집기는 Xiaohongshu 메모 삭제 방법에 대한 사용자 사진과 텍스트를 가져옵니다. 보세요! Xiaohongshu 사용 튜토리얼 Xiaohongshu 메모 삭제 방법 1. 먼저 Xiaohongshu 앱을 열고 메인 페이지로 들어가서 오른쪽 하단에 있는 [Me]를 선택하여 특별 영역으로 들어갑니다. 2. 그런 다음 내 영역에서 다음과 같이 메모 페이지를 클릭합니다. 3. 노트 페이지에 들어가서 오른쪽 상단에 있는 [점 3개]를 클릭합니다. 4. 마지막으로 기능 표시줄이 하단에 확장되고 [삭제]를 클릭하여 완료합니다.

WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? Apr 08, 2024 am 11:41 AM

1. 우선, 누군가를 영구 차단 및 삭제하고 영구 추가하지 않는 것은 허위입니다. 상대방을 차단하고 삭제한 후 추가하려면 상대방의 동의만 있으면 됩니다. 2. 사용자가 누군가를 차단하면 상대방은 해당 사용자에게 메시지를 보낼 수 없고, 사용자의 친구 서클을 볼 수 없으며, 사용자와 통화할 수 없습니다. 3. 차단은 사용자의 WeChat 연락처 목록에서 상대방을 삭제하는 것을 의미하지 않습니다. 4. 상대방을 차단한 후 자신의 위챗 연락처 목록에서 상대방을 삭제한 경우, 삭제 후 복구할 수 있는 방법이 없습니다. 5. 상대방을 다시 친구로 추가하려면 상대방이 동의한 후 다시 친구를 추가해야 합니다.

어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요? 어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요? Mar 13, 2024 pm 08:52 PM

컴퓨터를 매일 사용하는 과정에서found.000 파일이 누락되어 손상되었다는 오류 메시지가 나타날 수 있습니다. 이found.000은 어떤 폴더입니까? 더 이상 쓸모가 없으면 삭제할 수 있나요? 이 파일을 모르는 분들이 너무 많아서found.000 폴더에 대해 자세히 알려드릴게요~ 1.found.000 폴더는 무엇인가요? 불법 종료로 인해 컴퓨터가 일부 또는 완전히 분실된 경우, 찾을 수 있습니다. "found.000"이라는 특수 폴더와 그 안에 포함된 ".chk" 확장자를 가진 파일은 시스템 파티션에 있는 지정된 디렉터리에 있습니다. 이 "fo

Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까? Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까? Mar 21, 2024 pm 05:10 PM

인기 있는 소셜 전자상거래 플랫폼인 Xiaohongshu는 일상생활과 쇼핑 경험을 공유하기 위해 많은 사용자를 끌어 모았습니다. 때때로 당사는 개인 이미지를 더 잘 유지하거나 플랫폼 규정을 준수하기 위해 적시에 삭제해야 하는 일부 부적절한 콘텐츠를 실수로 게시할 수 있습니다. 1. Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 1. Xiaohongshu 계정에 로그인하고 개인 홈페이지에 들어갑니다. 2. 개인 홈페이지 하단의 '내 창작물' 옵션을 찾아 클릭하여 입장합니다. 3. "내 창작물" 페이지에서는 노트, 동영상 등 게시된 모든 콘텐츠를 볼 수 있습니다. 4. 삭제가 필요한 콘텐츠를 찾아 오른쪽에 있는 "..." 버튼을 클릭하세요. 5. 팝업 메뉴에서 "삭제" 옵션을 선택하세요. 6. 삭제 확인 후 해당 콘텐츠는 개인 홈페이지 및 공개 페이지에서 사라집니다.

Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 다른 사람의 댓글이 삭제되면 표시되나요? Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 다른 사람의 댓글이 삭제되면 표시되나요? Mar 21, 2024 pm 10:46 PM

Xiaohongshu는 인기 있는 소셜 전자상거래 플랫폼으로, 사용자 간의 쌍방향 댓글은 플랫폼에서 없어서는 안될 커뮤니케이션 방법입니다. 때때로 우리의 댓글이 다른 사람에 의해 삭제되어 혼란스러울 수 있습니다. 1. Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 댓글이 삭제된 것을 발견하면 먼저 플랫폼에서 관련 게시물이나 제품을 직접 검색하여 해당 댓글을 찾을 수 있는지 확인할 수 있습니다. 삭제 후에도 댓글이 계속 표시된다면 원래 게시물 소유자가 삭제했을 수 있습니다. 이때 원래 게시물 소유자에게 연락하여 댓글 삭제 이유를 문의하고 댓글 복원을 요청할 수 있습니다. 댓글이 완전히 삭제되어 원래 게시물에서 찾을 수 없는 경우, 해당 댓글이 플랫폼에 복원될 가능성은 상대적으로 희박합니다. 다른 방법을 시도해 볼 수 있습니다.

WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개 WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개 Mar 20, 2024 pm 08:31 PM

WeChat의 파일 전송 도우미는 모든 사용자가 사용할 수 있습니다. 일부 사용자는 이를 메모로 사용하여 일부 내용을 기록합니다. 그렇다면 WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 아래에서 자세히 소개해드리겠습니다. WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 답변: [WeChat]-[파일 전송 도우미 길게 누르기]-[이 채팅 삭제]. 구체적인 단계: 1. 먼저 홈 페이지에 들어간 후 [파일 전송 도우미]를 찾아 길게 누릅니다. 2. 그러면 팝업이 읽지 않음으로 표시되고 채팅을 상단에 고정합니다. 채팅을 표시하지 않고 채팅을 삭제합니다. 여기에서 [이 채팅 삭제]를 클릭할 수 있습니다.

TikTok 채팅 기록을 완전히 삭제하는 방법 TikTok 채팅 기록을 완전히 삭제하는 방법 May 07, 2024 am 11:14 AM

1. Douyin 앱을 열고 인터페이스 하단의 [메시지]를 클릭한 후 삭제해야 하는 채팅 대화 항목을 클릭합니다. 2. 채팅 기록 중 하나를 길게 누른 후 [복수 선택]을 클릭하고 삭제하려는 채팅 기록을 선택하세요. 3. 해당 기록을 영구 삭제하려면 오른쪽 하단의 [삭제] 버튼을 클릭한 후 팝업창에서 [삭제 확인]을 선택하세요.

See all articles