>
Jquery를 사용하여 특정 열 값이있는 행 뒤에 새 행을 추가하려면 어떻게해야합니까?
예를 들어 'Selina'뒤에 [NAME : CINDY AGE : 21] 열의 새 행을 추가하고 싶습니다. 'AGE'로 정렬 된 새 행을 추가하고 싶습니다. [NAME : Tori AGE : 26]은 'Kelly'다음에 추가됩니다.

<table>
  <tr>
    <th>NAME</th>
    <th>AGE</th>
  </tr>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>18</td>
    </tr>
    <tr>
      <td>Selina</td>
      <td>20</td>
    </tr>
    <tr>    
      <td>Kelly</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
<input type="text" name="name" id="name" placeholder="NAME">
<input type="text" name="age" id="age" placeholder="AGE">
<button type="button" id="add_btn">ADD</button>

감사합니다. 응원 :)

  • 답변 # 1

    작동해야합니다 :

    jQuery('#add_btn').on('click',function(){
      var age = jQuery('#age').val();
      var name = jQuery('#name').val();
        var target = jQuery('tbody > tr > td:last-child').filter(function(){
        return jQuery(this).text() >= age;
      }).first().parent();
      if(target.length > 0)
        target.before('<tr><td>'+name+'</td><td>'+age+'</td></tr>');
      else
        jQuery('tbody > tr:last').after('<tr><td>'+name+'</td><td>'+age+'</td></tr>');
    });
    
    

    jsFiddle

  • 답변 # 2

    function myFunction() {
      document.getElementById('test').innerHTML = document.getElementById('test').innerHTML + "<tr><td>" + document.getElementById('name').value + "</td><td>" + document.getElementById('age').value + "</td></tr>";
    }
    
    

    <!DOCTYPE html>
    <html>
    <head>
      <title>TODO supply a title</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      <table id="test">
        <tr>
          <th>NAME</th>
          <th>AGE</th>
        </tr>
        <tbody>
          <tr>
            <td>Alice</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Selina</td>
            <td>20</td>
          </tr>
          <tr>
            <td>Kelly</td>
            <td>25</td>
          </tr>
        </tbody>
      </table>
      <input type="text" name="name" id="name" placeholder="NAME">
      <input type="text" name="age" id="age" placeholder="AGE">
      <button type="button" onclick="myFunction()">ADD</button>
    </body>
    </html>
    
    

관련 자료

  • 이전 pyspark - 카프카 스트리밍 또는 스파크 스트리밍
  • 다음 javascript - 부트 스트랩 아코디언 - 시작 및 종료 카드의 요소에서 별도의 함수 호출