Javascript 在表格中并排输入和两个按钮

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

$（文档）。在（“单击”，“添加”，函数（）上）{
警报（$（“#添加”）.closest（））；
});
.w3表{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
显示：表格；
}
#量化输入{
宽度：40%；
高度：40px；
}
#quantidade分区{
字体大小：15磅；
显示：网格；
左侧填充：10px；
}
#量子化一号{
填充：0 3px；
}
#量子化一号：悬停{
背景色：#0F292F；
光标：指针；
}
#量子化{
左侧填充：80px；
}
桌子{
宽度：40%；
}

康帕斯酒店
阿罗兹
更改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>

希望这对您有所帮助。

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

阿罗兹


$（文档）。在（“单击”，“添加”，函数（）上）{
警报（$（“#按钮1”）.val（）；
});
尝试以下操作：


$（文档）。在（“单击”，“添加”，函数（）上）{
警报（$（“#添加”）.closest（'td'）.prev（）.find（'input[type=text]'）.val（））；
});
.w3表{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
显示：表格；
}
#量化输入{
宽度：40%；
高度：40px；
}
#quantidade分区{
字体大小：15磅；
显示：网格；
左侧填充：10px；
}
#量化i{填充：0 3px；}
#量子化一号：悬停{
背景色：#0F292F；
光标：指针；
}
#quantidade{左填充：80px；}
表{宽度：40%；}

康帕斯酒店
阿罗兹


它适用于以下情况：

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

如果要内联，为什么要在块级元素
中换行按钮？Ug，表格用于显示表格数据，而不是用于布局。@charlietfl，我想要和内联，但是block@j08691这只是我正在做的一点，我知道表格是用来显示表格数据的，这就是它的用途。最好使用HTML标记来描述事物是什么，所以使用
元素来封装
在语义上会更好。您希望按钮上有一个特定的图标，这是一个演示决定。表部分工作得很好，谢谢；）但是jquery不是。当我单击按钮时，我需要获取我单击的按钮的最近输入的值，但无论我做什么，它只会提醒“未定义的”$（文档）$（document）.on（“click”，“#rem”，function（）{alert（$（this）.closest（“tr”）.find（'input'）.val（）；}）；当我点击按钮时，我需要得到我点击的按钮的最近输入值，但无论我做什么，它只是提醒“未定义”，我建议你应该清楚地解释你的问题。你说
我想让它给我输入的值。
从来没有说过你想要最接近的输入值。顺便检查一下我的更新。对不起。我认为jquery有点清晰。它仍然是“未定义的”，我在回答（）后更改了表，并以您的示例提醒“未定义的”@MarianaLeites，我已经用您最新的
表更新了我的答案。请看一看……谢谢。我真的让它工作了，我做了你所做的，这就是我要找的，谢谢：）
$(document).on("click", "#add", function(){
    alert($(this).closest("tr").find('input').val());
});