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

【问题标题】：Input and two buttons side by side in table表格中并排的输入和两个按钮
【发布时间】：2018-05-28 00:25:28
【问题描述】：

我有一个输入和两个图标（就像按钮一样工作），我希望它们在表格中并排放置。此外，当点击图标（“按钮”）时，我希望它能够让我得到输入的值。

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

【问题讨论】：

如果您希望它是内联的，为什么要将按钮包装在 <div> 中，这是一个块级元素？
呃，表格是用来展示表格数据的，不是用来排版的。
@charlietfl，我想要和
内联，但块
@j08691，这只是我正在做的一点点，我知道表格是用来显示表格数据的，这就是这个
最好使用 HTML 标记来描述 是什么，因此使用包含 <i ... class=...> 的 <button> 元素将是语义上更好。您希望按钮上有一个特定图标这一事实是一个演示决定。

标签： javascript jquery html css html-table

【解决方案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>

【讨论】：

我在回答 (jsfiddle.net/KukApep3/8qn7mLj3/2) 后更改了表格，并以您的示例提醒“未定义”
@MarianaLeites，我已经用你最新的table 更新了我的答案。请看...谢谢。
我真的把它付诸实践了，我做了你所做的，这就是我想要的，谢谢:)

【解决方案2】：

  <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());
});

【讨论】：

表格部分工作得很好，谢谢 ;) 但是 jquery 没有。当我单击按钮时，我需要获取我单击的按钮的最接近输入的值，但无论我做什么，它只会提示“未定义”
$(document).on("click", "#add", function(){ alert($(this).closest("tr").find('input').val ());}); $(document).on("click", "#rem", function(){ alert($(this).closest("tr").find('input').val()); });

【解决方案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());
        });

希望这会对你有所帮助。

【讨论】：

当我点击按钮时，我需要获取我点击的按钮最近输入的值，但不管我做什么，它只是提醒“未定义”
我建议你应该清楚地解释你的问题。您说I want it to get me the value of the input. 从未说过您想要最接近输入的值。顺便检查一下我的更新。
对不起。我认为jquery有点清楚。它仍然是“未定义的”

【解决方案4】：

它适用于这个：

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

【讨论】：