Question

一个表中包含一些输入和选择字段。我想检查一行的所有输入和选择字段是否都有值。这就是我的想法，但是我必须使用closest和find吗？我认为这不是最佳选择。

HTML

<table>
    <tr>
        <td><select><option></option><option>Select anything</option></td>
        <td><input type="text" name="field1"></td>
        <td><input type="text" name="field2"></td>
    </tr>
    <tr>
        <td><select><option></option><option>Select something</option></td>
        <td><input type="text" name="field3"></td>
        <td><input type="text" name="field4"></td>
    </tr>
</table>

JS

'change #table input, change #table select': function(event) {
  var $this = $(event.currentTarget),
      $row  = $this.closest('tr'),
      $elements = $row.find('input, select');

  var empty = false;
  $elements.each(function(index) {
    if (!$(this).val()) empty = true;
  });

  if (empty)
    console.log('some value is missing')
  else {
    console.log('valide');
    // do something with values
  }
}

Answer 1

这里确实有两个问题：

选择表格行中所有输入的最佳方法
确保所有输入都有值

对于第一个问题，有一个潜意识方面。确保它是一个输入，然后在更改的输入的当前行的上下文中选择它。

首先，jQuery使用Sizzle（https://sizzlejs.com/）引擎进行选择。需要注意的一件事是该引擎对选择器字符串的“从右到左”处理。

因此，最佳选择在某种程度上取决于浏览器，但最快的选择方式是在类的现代浏览器中遵循的ID。一些较旧的浏览器也没有按类别进行选择，但让我们将其留给您进行研究。

选择：做事的坏方法

因此，让我们看看你可能会使用的复杂选择器：

'div.mycontainer div.mytablecontainer>table#mytable.mytableclass tr td select, div.mycontainer div.mytablecontainer>table#mytable.mytableclass tr td input'

首先关闭不要使用。现在探讨为什么不：记得我们谈过“从右到左”的选择器处理？为了讨论，让我们将选择器缩小到最后一部分：

"div.mycontainer div.mytablecontainer>table#mytable.mytableclass tr td input"

从右侧开始，这是做什么的：

“查找DOM中的所有输入”，
使用这些输入的列表，“查找td元素
使用这些td元素，找到tr
在tr元素中找到所有.mytableclass
查找ID为mytable的元素中的所有内容（请记住此ID必须是唯一的）
现在继续，找到table元素的单个元素ID
这是具有类mytablecontainer
这是DIV元素div
这是具有班级mycontainer
这是DIV元素div

那里有很多工作。但我们还没有完成！我们必须为那里的OTHER选择器做同样的事情。

选择：更好的做事方式

现在让我们做得更好;首先，让我们通过在所有“范围”输入中添加一个类来利用现代浏览器类选择器 - 我们要检查输入的内容。

<input class="myinput" />

它确实需要type=""属性，但暂时忽略它。让我们用它。

$('#mytable').find('.myinput');

这是做什么的：

选择ID为'mytable'的元素，它是所有浏览器中的FASTEST选择器;我们已经删除了DOM中的其他47个表。
查找类class="myinput"的所有元素; 该表格;在现代浏览器中，这也非常快

DONE。哇！这远远不够工作。

.find()而非"#mytable input"

还记得我们再次离开的权利吗？查找DOM中的所有输入，然后缩小到我们在该表中找到的那些输入现在没有停止。

或（更有可能）"#mytable .myinput"

所以我们选择一组元素的“规则”是：

使用ID 将范围限制为某个容器（如果可能的话）
使用ID本身不是更复杂选择器的一部分
在有限的范围内查找元素（如果可以的话，按类分类）
使用类，因为现代浏览器具有很好的选择优化功能。
当你开始放置空格“”或“＆gt;”在选择器中聪明，.find()或.children()会更好吗？在一个小型DOM中，维护可能会更容易，但也可以在4年内更容易理解？

第二个问题：不具体但仍然存在

您不能简单地全局使用!$(this).val()作为输入。对于无效的复选框。单选按钮怎么样？那个<input type="button" >之后有人添加到行中呢？ UGH。

所以，只需在您希望验证并由以下人员选择的所有“输入”中添加一个类：

<input type="text" class="validateMe" />
<select class="validateMe" >...

旁注你可能想要嗅探输入的TYPE并根据它进行验证：How to get input type using jquery?

编辑：请记住您的验证输入MIGHT有一个“真/假”值，因此可能会失败：!$(this).val()（单选按钮，复选框在这里出现）

一些代码和标记：

<table id="mytable">
  <tr>
    <td>
      <select class="myinput">
        <option></option>
        <option>Select anything</option>
      </select>
    </td>
    <td>
      <input class="myinput" type="text" name="field1" />
    </td>
    <td>
      <input class="myinput" type="text" name="field2" />
    </td>
  </tr>
  <tr>
    <td>
      <select class="myinput">
        <option></option>
        <option>Select something</option>
      </select>
    </td>
    <td>
      <input class="myinput" type="text" name="field3" />
    </td>
    <td>
      <input class="myinput" type="text" name="field4" />
    </td>
  </tr>
</table>
<div id="results">

</div>

可能不想要全局（名称空间为“选择器”）

var selectors = '.myinput';
$('#mytable').on('change', selectors, function(event) {
  var $this = $(event.currentTarget),
    $row = $this.closest('tr'),
    $elements = $row.find(selectors);
  var $filledElements = $elements.filter(function(index) {
    return $(this).val() || this.checked;
  });

  var hasEmpty = $filledElements.length !== $elements.length
  var rowIndex = $row.index();
  $('#results').append("Row:" + rowIndex + " has " + $filledElements.length + ' of ' + $elements.length + ' and shows ' + hasEmpty + '<br />');
  if (hasEmpty)
    console.log('some value is missing');
  else {
    console.log('valide');
    // do something with values
  }
});

和其他东西一起玩：https://jsfiddle.net/MarkSchultheiss/fqadx7c0/

Answer 2

如果您只是在知道要选择哪个父元素的情况下选择特定元素，则应尝试使用.filter()仅过滤掉没有如下值的元素：

$('button').click(function() {

    var h = $('table :input').filter(function() {
       return $(this).val() == "" && $(this);
    }).length;

    alert(h);

});

DEMO

Answer 3

我做了这个插件

https://plnkr.co/edit/q3iXSbvVWEQdLSR57nEi

$(document).ready(function() {
  $('button').click(function() {
    var table = $('table');
    var rows = table.find('tr');
    var error = 0;

    for (i = 0; i < rows.length; i++) {
      var cell = rows.eq(i).find('td');
      for (a = 0; a < cell.length; a++) {
        var input = cell.eq(a).find(':input');

        if (input.val() === "") {
          input.css("border", "solid 1px red");
          error++;
        } else {
          input.css("border", "solid 1px rgb(169, 169, 169)");
        }
      }
    } 

    if (error > 0){
      alert('Errors in the form!')
      return false;
    } else {
      alert('Form Ok!')
      return true;
    }
  })
})

简单的Jquery验证，搜索所有输入（包括选择），如果它为null，则递增错误计数器并更改类。如果错误计数器是> 0，警告错误并返回false;

也许不是最好的解决方案，但它确实可以帮助你开始。

检查表行的所有输入/选择字段是否都有值

3 个答案:

这里确实有两个问题：

选择：做事的坏方法

选择：更好的做事方式

第二个问题：不具体但仍然存在

一些代码和标记：