
  <h2>Filterable Table for Docker API</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <!-- <form method="post" action="{{route('api')}}"> -->
  <table class="table table-bordered" style="color:#fff">
    <thead>
      <tr>
        <th>Container</th>
        <th>State</th>
        <th>Published Ports</th>
      </tr>
    </thead>
    <tbody id="myTable">
            <tr>
                <td>123</td>
                <td>456</td>
                <td>
                    <input type = "hidden" name = "id" value = "1">
                    <button  type="submit" class="btn btn-Success" name="btn" value="start">啟動</button>
                    <button type="submit" class="btn btn-Danger" name="btn" value="stop">停止</button>
                    <button type="submit" class="btn btn-Primary" name="btn" value="restart">重啟</button>
                </td>
            </tr>
            <tr>
                <td>ddf</td>
                <td>fff</td>
                <td>
                    <input type = "hidden" name = "id" value = "1">
                    <button  type="submit" class="btn btn-Success" name="btn" value="start">啟動</button>
                    <button type="submit" class="btn btn-Danger" name="btn" value="stop">停止</button>
                    <button type="submit" class="btn btn-Primary" name="btn" value="restart">重啟</button>
                </td>
            </tr>
            <tr>
                <td>ccv</td>
                <td>ff</td>
                <td>
                    <input type = "hidden" name = "id" value = "1">
                    <button  type="submit" class="btn btn-Success" name="btn" value="start">啟動</button>
                    <button type="submit" class="btn btn-Danger" name="btn" value="stop">停止</button>
                    <button type="submit" class="btn btn-Primary" name="btn" value="restart">重啟</button>
                </td>
            </tr>
    </tbody>
  </table>
  <!-- </form>     -->
  <ul class="pagination justify-content-center" style="margin:20px 0">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>


<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

$(document).ready(function(){
    // code to read selected table row cell data (values).
    $("#myTable").on('click','.btn',function(){
        // get the current row
        var currentRow=$(this).closest("tr"); 
        
        var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
        var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
        var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
        var data=col1+"\n"+col2+"\n"+col3;
        
        alert(data);
    });
});
</script>