본문 바로가기
IT칼럼/ETC

jQuery table row add/delete

VanDevKIM 2019. 3. 6. 07:30


#1 Example


 <button id='btn-add-row'>ROW ADD</button>

<button id='btn-delete-row'>ROW DELETE</button>
<hr>

<table id="mytable" border="1" cellspacing="3">
  <tr>
    <th> TOPIC </th>
    <th> TIME </th>
  </tr>
  <tbody></tbody>
</table>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $('#btn-add-row').click(function() {
    var time = new Date().toLocaleTimeString();
    $('#mytable > tbody:first').append('<tr><td>Hello Friends</td><td>' + time + '</td></tr>');
  });
  $('#btn-delete-row').click(function() {
    $('#mytable > tbody:last > tr:last').remove();
  });
</script>


#2 Example


<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            // 옵션추가 버튼 클릭시

            $("#addItemBtn").click(function(){

                // item 의 최대번호 구하기

                var lastItemNo = $("#example tr:last").attr("class").replace("item", "");


                var newitem = $("#example tr:eq(1)").clone();

                newitem.removeClass();

                newitem.find("td:eq(0)").attr("rowspan", "1");

                newitem.addClass("item"+(parseInt(lastItemNo)+1));


                $("#example").append(newitem);

            });


            // 삭제버튼 클릭시

            $(".delBtn").live("click", function(){

                var clickedRow = $(this).parent().parent();

                var cls = clickedRow.attr("class");


                // 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다.

                if( clickedRow.find("td:eq(0)").attr("rowspan") ){

                    if( clickedRow.next().hasClass(cls) ){

                        clickedRow.next().prepend(clickedRow.find("td:eq(0)"));

                    }

                }

                clickedRow.remove();

                // rowspan 조정

                resizeRowspan(cls);

            });


            // cls : rowspan 을 조정할 class ex) item1, item2, ...

            function resizeRowspan(cls){

                var rowspan = $("."+cls).length;

                $("."+cls+":first td:eq(0)").attr("rowspan", rowspan);

            }

        });

    </script>

</head>


<body>

    <button id="addItemBtn">옵션추가</button>

        <table id="example" border="1px">

            <tr>

                <th>옵션명</th>

                <th>항목명</th>

                <th>필수항목</th>

                <th>가격</th>

                <th>재고</th>

                <th>옵션추가</th>

            </tr>

            <tr class="item1">

                <td><input type="text" /></td>

                <td><input type="text" /></td>

                <td><input type="checkbox" /></td>

                <td><input type="text" /></td>

                <td><input type="text" /></td>

                <td><button class="delBtn">삭제</button></td>

            </tr>

        </table>

</body>

</html>


저작자표시 비영리 변경금지

'IT칼럼 > ETC' 카테고리의 다른 글

crontab 사용법  (0) 2019.04.04
Python 파일 내 키워드 찾아서 라인 출력하기  (0) 2019.04.04
Vi Editor Command (VI 에디터 명령어 모음)  (0) 2019.03.06
Install htop-osx on Mac OSX  (0) 2019.03.02
Install tree on Mac OSX  (0) 2019.03.02

'IT칼럼/ETC' Related Articles

티스토리툴바