Question

我有一个具有输入掩码日期格式的表。当我单击添加新行时，将添加新行，但不会添加输入掩码日期格式。我想在每次点击新行时附加输入掩码日期字段。

<table>
  <tr>
    <td class="centrer">Arrived Date</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="datearrive" class="date" /> </td>
    <td>
      <button type="button" onClick="addRow(this)">ADD ROW</button>
    </td>
  </tr>
</table>

window.addRow = function addRow(btn) {
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var tr = document.createElement("tr");
    var tdDate = document.createElement("td");
    var tdButton = document.createElement("td");
    var inputDate = document.createElement("input");
    var inputButton = document.createElement("button");
    inputButton.type = "button";
    inputButton.innerHTML = "+";
    inputButton.onclick = function() {
      addRow(this);
    };
    tdDate.appendChild(inputDate);
    tdButton.appendChild(inputButton);
    table.appendChild(tr);
  }

//input mask
jQuery(function($) {
  $(".date").mask("99/99/9999");
});

任何帮助都将不胜感激。

Answer 1

您必须将.mask调用应用于每个新添加的日期元素。

e.g。像这样的东西：

tdDate.appendChild(inputDate);
tdButton.appendChild(inputButton);
table.appendChild(tr);
$(inputDate).mask("99/99/9999");  << do this last

注意：

如果我没有针对正确的元素，请道歉，但事实并非如此将date类分配给代码中的任何内容：）
当您使用jQuery时，可以使用jQuery将行创建代码减少大约60％（可能更多）。请参阅下面的示例。

jQuery版本：

$(function() {
  $(document).on('click', '.add').click(function() {
    var $table = $(this).closest('table');
    var $row = $('<tr><td><input type="text" name="datearrive" class="date" /> </td><td><button type="button" class="add">ADD ROW</button></td></tr>')
    $table.append($row);
    $(".date", $row).mask("99/99/9999");
  });
  $(".date").mask("99/99/9999");
});

上面的示例使用附加到文档的委托事件，以便在新行中动态添加按钮时触发。

使用JSFiddle：https://jsfiddle.net/0t3zyh7q/

单击按钮后，在新行中附加输入掩码

1 个答案:

jQuery版本：