无法获得当前行中第一个TD的值

Posted 2023-01-09

我的要求是在每个表行中有3个复选框，一旦选中该复选框，它将创建一个隐藏的输入，其值对应于该特定行的第一个<td>。

这是一个示例行：

<tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput()"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput()"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput()"></td>
</tr>

检查3个复选框中的任何一个后，应创建此隐藏输入。如果选中3，则应创建3个输入。这些输入的<value>应该等于此行中第一个<td>的值，即user1。这是我试图实现它的方式（代码不一致，但我只需要先让它工作）：

<script>
    function createUserNameInput() 
        // var input = document.createElement("input");
        // input.setAttribute("type", "hidden");
        // input.setAttribute("name", "user");
        // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
        // document.getElementById("main-form").appendChild(input);

        alert($(this).parent().siblings(":first").text()); // VALUE IS EMPTY
    
</script>

我已经引用了之前的帖子，但这些解决方案都不适合我。当我运行alert()时，值为空 - 没有显示任何内容：

1. Get first TD of THIS row
2. Jquery- Get the value of first td in table

谁可以帮忙？如果没有jQuery可以做到，更令人惊叹！

答案

1. 您必须将对象传递给您正在调用的函数： onclick="createUserNameInput(this)"
2. 将DOM对象转换为您检索的jQuery对象。 createUserNameInput(e)和$(e).parent()...

function createUserNameInput(e) 
  // var input = document.createElement("input");
  // input.setAttribute("type", "hidden");
  // input.setAttribute("name", "user");
  // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
  // document.getElementById("main-form").appendChild(input);

  alert($(e).parent().siblings(":first").text()); // VALUE IS NOT EMPTY NOW!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput(this)"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput(this)"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput(this)"></td>
  </tr>
</table>

另一答案

问题是，你没有将this传递给函数。从元素中的函数调用传递this，以便您可以在函数体内引用它。

function createUserNameInput(el) 
  var input = document.createElement("input");
  input.setAttribute("type", "hidden");
  
  input.setAttribute("name", "user");
  input.setAttribute("value", $(el).parent().siblings(":first").text()); // VALUE IS EMPTY
  document.getElementById("main-form").appendChild(input);

  alert($(el).parent().siblings("td:first").text()); // VALUE IS EMPTY
  console.log('Hidden field value:',$('#main-form input[name=user]').val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-form"></div>
<table>
  <tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput(this)"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput(this)"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput(this)"></td>
  </tr>
</table>

另一答案

您可以在复选框元素上绑定click事件，例如

$(function()
  $('.users').on('click',':checkbox',function()
        // var input = document.createElement("input");
        // input.setAttribute("type", "hidden");
        // input.setAttribute("name", "user");
        // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
        // document.getElementById("main-form").appendChild(input);

        var tr = $(this).closest('tr')
console.log(tr.children("td:first").text(),'total checked = '+ tr.find(':checkbox:checked').length); // VALUE IS EMPTY
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="users">
<tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name="1"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name="2"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="3"></td>
</tr>
</table>

另一答案

你能直接传递给这样的函数：

<td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput('user1')"></td>

---

得到这样的：

<script>
    function createUserNameInput(value) 
        console.log(value);
    
</script>

另一答案

$(this).closest('tr').find("td:first").text();

另一答案

您也可以尝试这种方式，将父节点放到表中并获取第一个子元素

$(e).parentsUntil('table').find('td:first').text()

以上是关于无法获得当前行中第一个TD的值的主要内容，如果未能解决你的问题，请参考以下文章

php 如何取出数组中第一个和最后一个元素的值

无法根据 UIPickerview 中第一个组件中的值重新加载第二个组件

如何使用类更改表中第一个 td 的颜色

获取下拉框第一个选项的值最后一个选项的值第二个选项的值

计算前几行中大于当前行值的值

在不同的行中定义 <td>，宽度不起作用