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

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/）引擎进行选择。要注意的一件事是该引擎对选择器字符串的“从右到左”处理。

因此，最佳选择在某种程度上是特定于浏览器的，但最快的选择方式是在现代浏览器中紧随其后的是一个类。一些较旧的浏览器也不会按类别选择，但让我们留作研究。

选择：做事的坏方法

因此，让我们来看一个可能使用的复杂选择器：

'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
那是class mytablecontainer元素的直接子代
那是一个DIV元素div
那是元素mycontainer的子元素
那是一个DIV元素div


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

选择：做事的更好方法

现在让我们做得更好；首先，我们通过向所有“作用域”输入中添加类来利用现代浏览器类选择器-我们要检查条目的事物。

<input class="myinput" />

它确实确实需要一个type=""属性，但现在忽略它。让我们使用它。

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

这是什么：


选择ID为'mytable'的元素，这是所有浏览器中最快速的选择器；我们已经在DOM中删除了其他47个表。
查找所有类别为class="myinput"的元素；在那个桌子里；在现代浏览器中，这也非常快


完成。哇！这么少的工作。

.find()而不是"#mytable input"的旁注

还记得我们再次向左走的权利吗？在DOM中找到所有输入，然后缩小到我们在该表中立即发现的那些输入。

或者（更好）"#mytable .myinput"

因此，我们选择一组元素的“规则”是：


尽可能使用ID将范围限制为某个容器
单独使用ID而不是更复杂的选择器的一部分
在有限范围内查找元素（如果可以，按类）
使用类，因为现代浏览器对此具有很好的选择优化。
当您开始在选择器中放置空格“”或“>”时，.find()或.children()会更好吗？在小型DOM中，维护可能会更容易，但四年后又会更容易理解？


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

您不能简单地将!$(this).val()全局用作输入。
对于无效的复选框。单选按钮呢？后来有人添加到该行的<input type="button" >呢？啊。

因此，只需将一个类添加到您希望验证的所有“输入”中，然后由这些输入进行选择：

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

旁注，您可能想嗅探输入的类型并根据以下内容进行验证：How to get input type using jquery?

编辑：请记住，您的验证输入可能有一个“ true / false”值，因此这可能会失败：!$(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/