HTML和JavaScript。嘗試定位來自相鄰錨點的文本輸入

我有一個 HTML 表格。在桌子上我有一個輸入文本框。在它的旁邊。（附加在 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 代碼，所以我一直盯著這個想知道我做錯了什么

uj5u.com熱心網友回復：

一些除錯表明這this是window您使用時的物件<a href="javascript:get_desc(this);"，：

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 事件（或 vanilla 事件）

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

uj5u.com熱心網友回復：

我使用 querySelector 而不是輸入的 find 和 value 屬性。

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>

uj5u.com熱心網友回復：

而不是 href 使用錨點的 onClick 屬性。

試試這個;

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

標籤：javascript html jQuery jquery 选择器

上一篇：將元素拖動為視窗

下一篇：顯示基于兩個單選按鈕的隱藏文本框