HTML & JavaScript。尝试定位来自相邻锚点的文本输入

Question

我有一个 HTML table。在 table 我有一个输入文本框。在它的旁边。（附加在 HTML 中）我有一个锚点。我想让锚点（目前）做的就是获取并设置文本框中的值。

这是我的（缩写代码）HTML代码：

<tr>
  <td class="t-Report-cell" headers="DEPARTMENT">
    <input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" />
    <td class="t-Report-cell" headers="DESCRIPTION">
      <input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off">
      <a href="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV">
        <span class="a-Icon icon-popup-lov">
                            <span class="visuallyhidden">List</span>
        </span>
      </a>
      <input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off">
      <input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" />
</tr>

注意我有一个输入 type=text name=f03 的值为“soup”（我还给它另一个属性来尝试定位它。（col_name="DESCRIPTION"）

然后在它下面，我有一个锚点，它调用一个 JavaScript 函数并传入当前行。

我的简单函数执行以下操作：

function get_desc(thisRow) {

  console.log(thisRow); 
      
  var desc = thisRow.find("input[name='f03']");
  console.log(desc);
  console.log(desc.val()); 
  console.log(desc.text());    
}

因此它传入当前行，查找输入，然后尝试获取值。

我可以在 console.log 上看到找到了正确的选择器，但我没有做任何事情都得到了值。

正如我所说，我的应用程序中有很多 JavaScript 代码，所以我一直盯着这个想知道我做错了什么

Answer 1

我使用 querySelector 而不是输入的查找和值属性。

function get_desc(thisRow) {

  console.log(thisRow);

  var desc = thisRow.querySelector("input[name='f03']");
  console.log(desc.value);

}

<table>
  <tr onclick="get_desc(this);">
    <td class="t-Report-cell" headers="DEPARTMENT">
      <input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" />
      <td class="t-Report-cell" headers="DESCRIPTION">
        <input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off">
        <a href="#" class="a-Button a-Button--popupLOV">
          <span class="a-Icon icon-popup-lov">
          <span class="visuallyhidden">List</span>
          </span>
        </a>
        <input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off">
        <input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" />
  </tr>
</table>

Answer 2

一些调试显示当你使用<a href="javascript:get_desc(this);"时this是window对象，:

function get_desc(link) {
  console.log(link === window);
}

<a href="javascript:get_desc(this);">click me</a>

如果必须使用html属性，那么可以使用onclick='get_desc(this):

function get_desc(link) {
  thisRow =  $(link).closest('tr') 
  var desc = thisRow.find("input[name='f03']");
  console.log(desc.val()); 
}

<table>
  <tr>
    <td>
      <input type="text" name="f03" value="soup">
      <a href="javascript:return false;" onclick="get_desc(this);">click me</a>
    </td>
  </tr>
</table>

或者，拥抱 jquery 事件（或原版事件）

$(".link").click(function() { 
  thisRow =  $(this).closest('tr') 
  var desc = thisRow.find("input[name='f03']");
  console.log(desc.val()); 
});

<table>
  <tr>
    <td>
      <input type="text" name="f03" value="soup">
      <a href="javascript:return false;" class='link'>click me</a>
    </td>
  </tr>
</table>

Answer 3

而不是 href 使用锚点的 onClick 属性。

试试这个；

<a href="#" onClick="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV">

HTML & JavaScript。尝试定位来自相邻锚点的文本输入

HTML & JavaScript. Trying to target a text input from an adjoining anchor

html

javascript

jquery

jquery-selectors