jQuery를 사용하여 동적으로 행을 추가하고 삭제하는 방법

이 자습서에서는 jQuery를 사용하여 동적으로 행을 추가하고 삭제하는 방법을 살펴봅니다. jquery를 사용하여 테이블에서 동적으로 행을 추가하고 제거하는 방법을 보여줍니다. jQuery를 사용하여 동적으로 테이블에 행을 추가합니다. 또한 한 번의 클릭으로 동시에 여러 행을 삭제할 수 있습니다. jquery는 테이블에 제거 행을 동적으로 추가합니다.

.append() 및 .remove() 메서드를 사용하여 jquery를 사용하여 행을 동적으로 추가하고 삭제할 수 있습니다. append() 메서드는 HTML 테이블 내부에 행을 추가하거나 추가하는 데 사용되며 .remove() 메서드는 jquery를 사용하여 동적으로 DOM에서 테이블 행과 테이블 내부의 모든 데이터를 제거하거나 삭제하는 데 사용됩니다.

이제 javascript를 사용하여 HTML 테이블에서 행을 동적으로 추가/제거하고 jquery를 사용하여 테이블에 행을 동적으로 추가하는 방법을 살펴보겠습니다.

예시 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Add and Delete Rows Dynamically Using jQuery - Techsolutionstuff</title>
<style>
    form{
        margin: 20px;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 90%;
        margin: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;       
    }
    .delete-row, h2{
      margin:20px;
    }
</style>

</head>
<body style="border:1px solid grey">
    <h2>How To Add and Delete Rows Dynamically Using jQuery - Techsolutionstuff</h2>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>techsolutionstuff</td>
 <td>[email protected]</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>web developemnt</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });

        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>



Read Also : Change Text Color Based On Background Color Using Javascript


출력 :




다음을 좋아할 수도 있습니다.
  • Read Also : Laravel 6 CRUD Tutorial with Example
  • Read Also : Carbon Add Minutes In Laravel Example
  • Read Also : How To Toggle Dark And Light Mode Using jQuery
  • Read Also : Drag and Drop File Upload Using Dropzone JS in Laravel 8
  • 좋은 웹페이지 즐겨찾기