contoh .parents() dan .find() pada jquery

contoh .parents() dan .find() pada jquery

by Adi Jaya

HTML

<table>
  <thead>
  	<tr>
    	<th>#</th>
      	<th>Nama</th>
      	<th>Kelas</th>
      	<th>Action</th>
    </tr>
  </thead>
  <tbody>
  	<tr>
    	<td>1</td>
      	<td>Andi</td>
      	<td>3
          <div class="panel-action">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
          </div>
      	</td>
      	<td>
          	<button class="button-action" type="button" data-action="edit">Edit</button>
          	<button class="button-action" type="button" data-action="delete">Delete</button>
      	</td>
    </tr>
  	<tr>
    	<td>2</td>
      	<td>Wati</td>
      	<td>4
          <div class="panel-action">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
          </div>
      </td>
      	<td>
          	<button class="button-action" type="button" data-action="edit">Edit</button>
          	<button class="button-action" type="button" data-action="delete">Delete</button>
      	</td>
    </tr>
  	<tr>
    	<td>3</td>
      	<td>joko</td>
      	<td>4
          <div class="panel-action">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
          </div>
      </td>
      	<td>
          	<button class="button-action" type="button" data-action="edit">Edit</button>
          	<button class="button-action" type="button" data-action="delete">Delete</button>
      	</td>
    </tr>
  </tbody>
</table>

CSS

/* CSS Code */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid silver;
}

.panel-action {
    display: none;
    padding: 0;
    border: 1px solid silver;
    border-radius: 4px;
    margin: 13px 0;
}

select {
    width: 100%;
    padding: 5px 10px;
    border: 0;
    display: block;
}

JavaScript

$( document ).on("click", ".button-action", function(){
  var parents = $( this ).parents("tr");
  var action = $( this ).attr("data-action");
  
  if( action == "edit" ) {
    $( ".panel-action" ).hide();
    parents.find( ".panel-action").show();
    parents.find( ".panel-action select").focus();
  } 
  else if( action == "delete" ) {
    alert( "action delete" );
  }
});