Question

如何在表格行中使用类timeinhh1获取文本框的每个值？

我正在使用此代码：

function ValidateOnLoad() {
    $('tr').each(function () {
        var timeinhh1 = $(this).children('.timeinhh1').val();
        alert(timeinhh1);
    });
}

<table>
    <tr>
        // th here
    </tr>
    <tr>
        <td><input type="text" class="timeinhh1" value="9"></td>
        <td><input type="text" class="timeinhh2" value="12"></td>
    </tr>        
    <tr>
        <td><input type="text" class="timeinhh1" value="13"></td>
        <td><input type="text" class="timeinhh2" value="14"></td>
    </tr>
</table>

但它不起作用，如何正确地做到这一点？提前谢谢。

Answer 1

$(document).ready(function() {
  ValidateOnLoad();

  function ValidateOnLoad() {
    $('tr').each(function() {
      $(this).find('td').each(function() {
        console.log("td");
        alert($(this).find(".timeinhh1").val());

      });

    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>

  </tr>

  <tr>
    <td>
      <input type="text" class="timeinhh1" value="9">
    </td>
    <td>
      <input type="text" class="timeinhh1" value="13">
    </td>
  </tr>

</table>

Answer 2

尝试

  $(document).ready(function(){
        $('tr').each(function () {
            var timeinhh1 = $(this).children('td').find('.timeinhh1').val();
            alert(timeinhh1);
        });
    });

检查here

Answer 3

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）同样。

您的结构为tr>td>.timeinhh1，因此this.children为您提供td而不是.timeinhh1。并且children()仅为您提供特定元素的直接孩子。 Docs

试试这个

 $('tr').each(function() {
   var timeinhh1 = $(this).children('td').children('.timeinhh1  ').val();// using children find td and then timeinhh1 
   var x = $(this).find('.timeinhh1  ').val();// you can do the same using find
   console.log('using chidren - ' + timeinhh1);
   console.log('using find - ' + x)
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>// th here</tr>
  <tr>
    <td>
      <input type="text" class="timeinhh1" value="9" />
    </td>
    <td>
      <input type="text" class="timeinhh2" value="12" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" class="timeinhh1" value="13" />
    </td>
    <td>
      <input type="text" class="timeinhh2" value="14" />
    </td>
  </tr>
</table>

Answer 4

您的代码工作正常，几乎没有问题，它在第一个tr上没有找到.timeinhh1类，这就是为什么它返回undefined，而不是在所有tr上应用每个，应用类的过滤器你想要timeinhh1。

＆＃13;

$(document).ready(function () {
    $('tr').find('.timeinhh1').each(function () {
            var timeinhh1 = $(this).val();
            alert(timeinhh1);
   
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
    <tr>
        // th here
    </tr>

    <tr>
        <td><input type="text" class="timeinhh1" value="9"></td>
        <td><input type="text" class="timeinhh2" value="12"></td>
    </tr>

    <tr>
        <td><input type="text" class="timeinhh1" value="13"></td>
        <td><input type="text" class="timeinhh2" value="14"></td>
    </tr>

</table>

＆＃13;

获取每个文本框的值在表行内具有相同的类

4 个答案: