집 > 기사 > 웹 프론트엔드 > 양식에서 데이터를 동적으로 추가하고 삭제하는 jQuery의 구현 정보

양식에서 데이터를 동적으로 추가하고 삭제하는 jQuery의 구현 정보

不言원래의: 2018-07-03 17:51:542305검색

이 글에서는 주로 jQuery 이벤트 응답 및 페이지 요소의 동적 조작과 관련된 구현 기술을 포함하여 양식에서 동적으로 데이터를 추가하고 삭제하는 jQuery 구현을 소개합니다.

이 글의 예는 jQuery를 알려줍니다. 양식에 데이터를 동적으로 추가하고 삭제하는 구현이 작동합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户名注册</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#button").click(function () {
        var name = $("#yonghu").val();
        var mima = $("#mima").val();
        var youxiang = $("#youxiang").val();
        var tr = "<tr><td>" + &#39;<input type="checkbox">&#39; + "</td><td>" + name + "</td><td>" + mima + "</td><td>" + youxiang + "</td><td>" + &#39;<input type="button" value="删除">&#39; + "</td></tr>";
        $("#table").append(tr);
        $(":button").click(function () {
          $(this).parent().parent().remove();
        });
      });
    });
  </script>
</head>
<body>
用户:<input id="yonghu" type="text">
密码:<input id="mima" type="password">
邮箱:<input id="youxiang" type="text">
<input type="submit" id="button" value="添加">
<table id="table" border="1ps">
  <tr>
    <td><input type="checkbox"></td>
    <td>用户名</td>
    <td>密码</td>
    <td>邮箱</td>
    <td>操作</td>
  </tr>
</table>
</body>
</html>

작업 결과:

위는 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. , 더 많은 관련 콘텐츠를 보려면 PHP에 주목하세요. 중국어 웹사이트!

양식에서 데이터를 동적으로 추가하고 삭제하는 jQuery의 구현 정보

관련 기사