1. Append란?


.append(content, [content])


=> 어떤 요소에 마지막 자식 요소를 새로 추가한다.

content 추가될 HTML 문자열, DOM요소, 또는 jQuery 객체.


html


1
2
3
4
5
6
7
8
9
10
11
12
<button id="add_cert">addrow</button>
<table >
    <tr>
        <th>name</th>
        <th>price</th>
        <th></th>
    </tr>
    <tbody id="asdf">
        <tr><td>example</td><td>123,456</td></tr>
    </tbody>
    
</table>


script


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
var cnt2 = 0;
$("#add_cert").click(function(){
    var cnt = $(".Rowtr").length;
    if(cnt<=30){
        var addrow = '<tr class="Rowtr" id="Rowtr_'+cnt2+'"><td><input type="text" id="name_"'+cnt2+' value="'+cnt2+'"/></td>
    <td><input type="text" id="price_"'+cnt2+'/></td><td><a onclick="removeRow('+cnt2+')">-</a></td></tr>';
 
        $("#asdf").append(addrow);
        cnt++;
        cnt2++;
    }
});
function removeRow(cnt){
    $("#Rowtr_"+cnt).remove();
}
</script>


행은 30이 최대, 추가 삭제 가능



'Javascript > JQuery' 카테고리의 다른 글

[JQuery] JQuery를 이용한 CSS 사용  (0) 2017.07.27

select box 옵션 선택 시, 선택 된 값 스타일 변화


// selected 주기 위함

<?php

$selectBTS = "";

$selectTWICE = "";

if($_REQUEST['singsel'] == "BTS"){

$selectBTS = "selected";

}else if($_REQUEST['singsel'] == "TWICE"){

$selectTWICE = "selected";

}


?>


<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

<!-- style 주기 -->

  <style>

.register_account { color: #FF0000; background: white; }

option:not(:checked) { color: #000000; background: white; }

  </style>


 </head>

 <body>

  <select id="singsel">

<option value ="">가수들</option>

    <option value="BTS" <?=$selectBTS?>>BTS</option>

    <option value="TWICE" <?=$selectTWICE?>>TWICE</option>

  </select>

  

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

  <script>

$(function() {

// singsel 의 값이 있으면 class 값 주기

if($("#singsel").val()){

$("#singsel").addClass('register_account');

}


// singsel change 

$("#singsel").change(function() {

var singsel = $("#singsel").val();

if(singsel){

location.href="<?=$_SERVER['PHP_SELF']?>?singsel="+singsel;

}else{

location.href="<?=$_SERVER['PHP_SELF']?>";

}

});

});

  </script>

 </body>

</html>


결과


value 없을 때 

값 선택 전


값 선택 시 글씨 색 변경



'Javascript > JQuery' 카테고리의 다른 글

[JQuery] Append 이용한 Row 추가 삭제  (0) 2017.08.28

+ Recent posts

티스토리툴바