Question

我有一个包含4行的html表，当用户在 first中输入所有详细信息时，我只想启用第一行并禁用所有其他3行，并启用第二行行（输入订单ID，选择“ Product1”，输入说明，然后从下拉列表中选择“ Product2”）。同样，当用户在第二行中输入所有详细信息时，启用第三行。我尝试在disabled="disabled"中使用<tr>来禁用最后3行，但是它没有按预期工作。

另一项验证检查是，当用户在“说明”列中为每一行输入值时，则仅应检查用户在其中选择的值如果在Product1和Product2下拉列表中选择的值相同，则列Product1和Product2会显示错误消息（Product1和Product2值不能相同）。

演示：http://plnkr.co/edit/7s3QQXrrmaH3nUXQ0td5?p=preview

html代码：

<table id="productTable" border="1">
    <thead>
    <tr>
        <th>Order ID</th>
        <th>Product1</th>
        <th>Description</th>
        <th>Product2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="text" name="orderNum" value=""></td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <input type="text" name="description" value="">
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    <tr disabled="disabled">
        <td><input type="text" name="orderNum" value=""></td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <input type="text" name="description" value="">
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    <tr disabled="disabled">
        <td><input type="text" name="orderNum" value=""></td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <input type="text" name="description" value="">
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    <tr disabled="disabled">
        <td><input type="text" name="orderNum" value=""></td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <input type="text" name="description" value="">
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    </tbody>
</table> <br>
<button name="submit" id="dataButton" onClick="getData()" disabled>Get Data</button>

js代码：

 function populateSelect() {
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
      var productDropdown1 = $(".product1"); 
      var productDropdown2 = $(".product2");
      $.each(ids, function(index,value) {
      $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
        $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
      });

       $("select").change(function() 
       {   
       var row = $(this).closest("tr");
       var product1_drop = $('.product1',row).val();
       var product2_drop = $('.product2',row).val();
       if(product1_drop == product2_drop ){       
            alert('Product1 and Product2 cannot have same value');
      }
   });
 }

使用上面的js代码，当用户从下拉列表中选择值时，它正在检查验证，但是我想要当用户在文本框中输入文本然后检查两个下拉列表（Product1和Product2）是否具有值相同，并在该行附近显示错误消息，而不是弹出对话框。

Answer 1

如果我正确理解了您的问题，那么您将尝试执行以下代码。您可以使用事件委托在父级tr上附加1个事件侦听器，以监听对该行中所有<input>和select元素的更改。

让事件监听器检查所有input元素是否都具有值，如果是，则使用disabled从下一行的下一个元素中删除NonDocumentTypeChildNode.nextElementSibling属性

function initTable(rowQuantity, columnQuantity) {
  const tbody = document.getElementById('productTable').querySelector('tbody');
  for (let i = 0; i < rowQuantity; i++) {
    let row = document.createElement("tr");
    for (let j = 0; j < columnQuantity; j++) {
      let cell = document.createElement("td");
      let content = null;
      let option = null;

      switch (j) {
        case 0:
          content = document.createElement("input");
          content.setAttribute("type", "text");
          content.setAttribute("name", "orderNum");
          break;
        case 1:
          content = document.createElement("select");

          option = document.createElement("option");
          option.setAttribute("value", "dog");
          option.appendChild(document.createTextNode("Dog"));
          content.appendChild(option);

          option = document.createElement("option");
          option.setAttribute("value", "cat");
          option.appendChild(document.createTextNode("Cat"));
          content.appendChild(option);

          option = document.createElement("option");
          option.setAttribute("value", "hamster");
          option.appendChild(document.createTextNode("Hamster"));
          content.appendChild(option);
          break;
        case 2:
          content = document.createElement("input");
          content.setAttribute("type", "text");
          content.setAttribute("name", "description");
          break;
        case 3:
          content = document.createElement("select");

          option = document.createElement("option");
          option.setAttribute("value", "x");
          option.appendChild(document.createTextNode("X"));
          content.appendChild(option);

          option = document.createElement("option");
          option.setAttribute("value", "y");
          option.appendChild(document.createTextNode("Y"));
          content.appendChild(option);

          option = document.createElement("option");
          option.setAttribute("value", "z");
          option.appendChild(document.createTextNode("Z"));
          content.appendChild(option);
          break;
      }

      if (i > 0) {
        content.setAttribute('disabled', true);
      }
      cell.appendChild(content);
      row.appendChild(cell);
    }

    //Event delegation to the parent
    row.addEventListener('change', function(e) {
      const cells = e.currentTarget.querySelectorAll('td');
      const selections = Array.prototype.reduce.call(cells, (sum, cell) => {
        if (cell.children[0].value) {
          sum += 1;
        }
        return sum;
      }, 0);

      if (selections === columnQuantity) {
        if (row.nextElementSibling) {
          let nextRowEls = row.nextElementSibling.querySelectorAll('input');
          Array.prototype.forEach.call(nextRowEls, el => el.disabled = false);
          nextRowEls = row.nextElementSibling.querySelectorAll('select');
          Array.prototype.forEach.call(nextRowEls, el => el.disabled = false);
        }
      }
    })

    tbody.appendChild(row);
  }
}

initTable(4, 4);

<table id="productTable" border="1">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Product1</th>
      <th>Description</th>
      <th>Product2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

禁用除第一行以外的所有行，并在上一行充满数据时启用每一行

1 个答案: