Question

我有一张输入文本字段的表格。我想向所有字段添加事件处理程序，以便在单击单元格时，X会填充输入值和单元格。再次单击，X值将再次变为“”。我已经分配了事件处理程序，但是在输入字段上设置新值时遇到麻烦。

我尝试了来自Web上不同位置的许多代码段，但无法在表格单元格（输入文本字段）中获取要更改的值。

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].getAttribute('type') == 'text') {
    inputs[i].addEventListener('click', changeValue);
  }
}

function changeValue(el) {
  var el = this;
  var v = el.value;

  if (v === "") {
    v = 'X';
    console.log(v);
  } else if (v === 'X') {
    v = "";
  }
}

<table>
  <thead>
    <tr>
      <th scope="col">type</th>
      <th scope="col">1/4</th>
      <th scope="col">3/8</th>
    </tr>
  </thead>
  <tbody>
    <tr class="list_group">
      <td class="cell1" data-label="type">
        <input aria-label="type" type="text" name="input_1[]" value="Fir"></td>
      <td class="cell2" data-label="1/4">
        <input aria-label="1/4" type="text" name="input_1[]" value=""></td>
      <td class="cell3" data-label="3/8">
        <input aria-label="3/8" type="text" name="input_1[]" value=""></td>
    </tr>
    <tr class="list_group">
      <td class="cell1" data-label="type">
        <input aria-label="type" type="text" name="input_1[]" value="SYP"></td>
      <td class="cell2" data-label="1/4">
        <input aria-label="1/4" type="text" name="input_1[]" value=""></td>
      <td class="cell3" data-label="3/8">
        <input aria-label="3/8" type="text" name="input_1[]" value=""></td>
    </tr>
    <tr class="list_group">
      <td class="cell1" data-label="type">
        <input aria-label="type" type="text" name="input_1[]" value="Marine"></td>
      <td class="cell2" data-label="1/4">
        <input aria-label="1/4" type="text" name="input_1[]" value=""></td>
      <td class="cell3" data-label="3/8">
        <input aria-label="3/8" type="text" name="input_1[]" value=""></td>
    </tr>
  </tbody>
</table>

前提是要提供一个大图表，用户可以从图表中查看他们拥有或感兴趣的产品

Answer 1

您的逻辑很接近。事件处理程序接收event作为参数，并且您可以通过this访问处理程序中注册的DOM元素。 See here.

因此，您所需要做的就是在changeValue函数中简化代码。代替el表示元素，请使用e代表事件。这将为您将来提供帮助，因为事件对象上除了当前的属性外，还具有多种属性，可用于多种目的。

接下来，由于value已绑定到目标DOM元素，因此您既可以获取并设置通过input单击的特定this.value的{{1}}。

然后可以将事件处理程序简化为简单的this操作：

ternary

function changeValue(e) { this.value = this.value === "X" ? "" : "X" }操作检查条件是否值等于“ X”，如果是，则返回一个空字符串，否则（意味着该值是X以外的值）返回“ X”

ternary

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].getAttribute('type') == 'text') {
    inputs[i].addEventListener('click', changeValue);
  }
}

function changeValue(e) {
    this.value = this.value === "X" ? "" : "X"
}

如何分配事件处理程序以在单击时增加文本输入字段/更改文本？

1 个答案: