javascript - 表格中并排输入和两个按钮

Question

我有一个输入和两个图标(像按钮一样工作)，我希望它们在表格中并排显示。此外，当单击图标(“按钮”)时，我希望它能为我提供输入的值。

$(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

尝试以下操作:

$(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>