表中的输入和两个按钮并排

Question

I got an input and two icons (that work like buttons) and I want them to be side by side in a table. Besides, when on click of the icons ("buttons"), I want it to get me the value of the input.

 $(document).on("click", "#add", function() { alert($("#add").closest()); }); 

 .w3-table { border-collapse: collapse; border-spacing: 0; width: 100%; display: table; } #quantidade input { width: 40%; height: 40px; } #quantidade div { font-size: 15pt; display: grid; padding-left: 10px; } #quantidade i { padding: 0 3px; } #quantidade i:hover { background-color: #0F292F; cursor: pointer; } #quantidade { padding-left: 80px; } table { width: 40%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table class="w3-table"> <thead> <tr> <th colspan="3"> <h2>Lista das Compras</h2> </th> </tr> </thead> <tbody> <tr> <td>Arroz</td> <td id='quantidade' class='w3-right'> <input type='text' class='w3-input w3-left' value='1'> <div> <i id='add' class='fa fa-angle-up'></i> <i id='rem' class='fa fa-angle-down'></i> </div> </td> </tr> </tbody> </table> 

Demo

Answer 1

  <tr>
    <td>Arroz</td>
    <td id='quantidade'>
      <input type='text' id='button1' value='1'>
    </td>
    <td>
      <div>
        <span id='add' class='fa fa-angle-up'></span><br>
        <span id='rem' class='fa fa-angle-down'></span>
      </div>
    </td>
  </tr>

$(document).on("click", "#add", function(){
    alert($("#button1").val());
});

Answer 2

Try the following:

 $(document).on("click", "#add", function(){ alert($("#add").closest('td').prev().find('input[type=text]').val()); }); 

 .w3-table { border-collapse:collapse; border-spacing:0; width:100%; display:table; } #quantidade input { width: 40%; height: 40px; } #quantidade div { font-size: 15pt; display: grid; padding-left: 10px; } #quantidade i {padding: 0 3px;} #quantidade i:hover { background-color: #0F292F; cursor:pointer; } #quantidade {padding-left: 80px;} table {width: 40%;} 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="w3-table"> <thead> <tr> <th colspan="3"><h2>Lista das Compras</h2></th> </tr> </thead> <tbody> <tr> <td>Arroz</td> <td> <input type='text' id='button1' value='1'> </td> <td> <div> <span id='add' class='fa fa-angle-up'></span><br> <span id='rem' class='fa fa-angle-down'></span> </div> </td> </tr> </tbody> </table> 

Answer 3

Change your jquery code

 $(document).on("click", "#add", function () {
        alert($(this).parent().closest('div').prev('input').val());
    });

As you said you have changed your table structure like this

<table class="w3-table">
            <thead>
              <tr>
                <th colspan="3"><h2>Lista das Compras</h2></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Arroz</td>
                <td>
                  <input type='text' id='button1' value='1'>
                </td>
                <td>
                  <div>
                    <span id='add' class='fa fa-angle-up'></span><br>
                    <span id='rem' class='fa fa-angle-down'></span>
                   </div>
                </td>
                </tr>
                </tbody>
                </table>

So code for new structure table will be

$(document).on("click", "#add", function () {
            alert($(this).parent().closest('div').parent().prev('td').find('#button1').val());
        });

Hope this will help you.

Answer 4

It works with this:

$(document).on("click", "#add", function(){
    alert($(this).closest("tr").find('input').val());
});