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

  <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

尝试以下方法：

＆＃13;

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

＆＃13;

.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%;}

＆＃13;

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

＆＃13;

Answer 3

更改您的jquery代码

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

如你所说，你已经改变了你的表结构

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

因此新结构表的代码将是

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

希望这会对你有所帮助。

Answer 4

适用于此：

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

表中输入和两个按钮并排

4 个答案: