요소 조작 메서드 실습_jQuery

1.
#guguBtn 버튼 클릭 시 #gugu 하위에 아래의 형태의 html이 출력되도록 하시오.

<ul id="gugu">
</ul>
<button type="button" id="guguBtn">2단 구구단</button>
<h3>완성된 결과물</h3>
<ul>
	<li>2 X 1 = 2</li>
	<li>2 X 2 = 4</li>
	<li>2 X 3 = 6</li>
	<li>2 X 4 = 8</li>
	<li>2 X 5 = 10</li>
	<li>2 X 6 = 12</li>
	<li>2 X 7 = 14</li>
	<li>2 X 8 = 16</li>
	<li>2 X 9 = 18</li>
</ul>

2.
아래의 버튼 클릭 시 같은 행의 '미완료'로 표기된 텍스트를 '완료'로 바꾸시오.

<table border="1">
	<tbody>
		<tr>
			<td class="check-text">미완료</td>
			<td><button type="button" class="checkks">확인</button>
		</tr>
		<tr>
			<td class="check-text">미완료</td>
			<td><button type="button" class="checkks">확인</button>
		</tr>
		<tr>
			<td class="check-text">미완료</td>
			<td><button type="button" class="checkks">확인</button>
		</tr>
		<tr>
			<td class="check-text">미완료</td>
			<td><button type="button" class="checkks">확인</button>
		</tr>
		<tr>
			<td class="check-text">미완료</td>
			<td><button type="button" class="checkks">확인</button>
		</tr>
	</tbody>
</table>

3.
아래의 객체들의 값들이 변경시 #totalPrice에 계산하여 값을 출력하도록 하시오.

<table border="1">
     <tbody>
        <tr>
           <td>상품 기본가격</td>
           <td>
              <span style="color: #f00;">10000</span>원
              <input type="hidden" id="goodsPrice" value="10000">
           </td>
        </tr>
        <tr>
           <td>상품 수량</td>
           <td>
              <input type="number" id="goodsNum" value="0">
           </td>
        </tr>
        <tr>
           <td>상품 옵션</td>
           <td>
              <select id="goodsOption">
                 <option value="0"> :: 크기선택 ::</option>
                 <option value="1000"> 라지 (+1000)</option>
                 <option value="500"> 미디움 (+500)</option>
              </select>
           </td>
        </tr>
        <tr>
           <td>총 합산가격</td>
           <td>
              <input type="hidden" id="totalPrice">
              <span id="totalPriceText" style="color: #f00; font-size: 20px">
                 0
              </span>
              원
           </td>
        </tr>
     </tbody>
  </table>

 

1. 답

<script type="text/javascript">
	$('#guguBtn').click(function() {
		var str = '';
		for (i = 1; i < 10; i++) {
			str += '<li>2 X' + i + '=' + (2 * i) + '</li>';
		};
		$('#gugu').html(str);
	});
</script>

2. 답

<script type="text/javascript">
	$('.checks').click(function() {
			var textTd=$(this).parents('tr').find('.check-text');
		if (textTd.text().trim() == '미완료') {
			textTd.text('완료');
		}else{
			textTd.text('미완료');
		}
	});
</script>

3. 답

 <script type="text/javascript">
     $(function() {
        $('#goodsNum').change(function() {
           var sumPrice = $('#goodsPrice').val() * $(this).val();
           $('#totalPriceText').text(sumPrice);
        });
        $('#goodsOption').change(function() {
           var sumPrice2 = $('#goodsPrice').val() * $('#goodsNum').val() + Number($(this).val());
           $('#totalPriceText').text(sumPrice2);
        });
     });
  </script>