Question

在我接触到任何内容之前，我想让你知道我已经阅读了很多关于我的问题的内容。而且我知道这个问题的标题可能会被编辑复制，如果我最终得到一个解决方案，那就完全可以了。解释我的问题。

所以我有一个表，想要点击它们来更改标题的名称。我基本上想要的是每当我点击其中一个标题时。我想采用它的innerHTML并使其成为文本框的价值。

我一直试图用for循环做这个但没有成功。每次我点击任何标题时，我的文本框都会填充最后一个标题。我已经有了一个工作版本的代码，每个代码都有单独的点击事件功能，但我认为可以使用for循环＆amp;关闭。

＆＃13;

/*/ =========================================================== /*/

for (var i = 1; i < 4; i++) {
  document.getElementById('H' + i).addEventListener("click", HeaderClicked);
  console.log("TH " + i + " click event added!");

  for (var x = 0; x < 2; x++) {
    function HeaderClicked() {
      headerText.focus();
      headerText.value = tableHeaders[x].innerHTML;
      console.log("TH clicked");
      console.log("X is " + x);
    }
  }
}


/*/ =========================================================== /*/

document.getElementById('Rename').addEventListener("click", Renaming);

var tableHeaders = [document.getElementById("H1"), document.getElementById("H2"),
  document.getElementById("H3")
];
var headerText = document.getElementById("headerText");

function Renaming() {
  var newName = document.getElementById("newName").value;
  var addRowLabel = document.getElementById("addRowLabel");

  switch (headerText.value) {
    case tableHeaders[0].innerHTML:
      tableHeaders[0].innerHTML = newName;
      addRowLabel.innerHTML = "Data(" + newName + " " + tableHeaders[1].innerHTML + " " + tableHeaders[2].innerHTML + ")";
      console.log("Header 1 changed!");
      break;
    case tableHeaders[1].innerHTML:
      tableHeaders[1].innerHTML = newName;
      addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + newName + " " + tableHeaders[2].innerHTML + ")";
      console.log("Header 2 changed!");
      break;
    case tableHeaders[2].innerHTML:
      tableHeaders[2].innerHTML = newName;
      console.log("Header 3 changed!");
      addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + tableHeaders[1].innerHTML + " " + newName + ")";
      break;
    default:
      console.log("Name doesn't exist");
  }
}

＆＃13;

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <table id="myTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
    <thead>
      <tr>
        <th id="H1" class="mdl-data-table__cell--non-numeric">ClickMe1</th>
        <th id="H2">ClickMe2</th>
        <th id="H3">ClickMe3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
      </tr>
  </table>

  <div id="Controls">
    <br>

    <div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="headerText" autocomplete='off' />
      <label class="mdl-textfield__label" for="CurrentName">Header name</label>
    </div>
    -
    <div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="newName" autocomplete='off' />
      <label class="mdl-textfield__label" for="NewName">Header New Name</label>
    </div>

    <button id="Rename" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
      Rename
    </button>
  </div>
</body>

</html>
<style>
  button {
    margin: 10px 5px 5px 10px;
  }
  table {
    margin: 10px 5px 5px 10px;
  }
  #SmallerLabels {
    width: 140px;
  }
  #Controls {
    margin: auto 5px auto 10px;
  }
</style>

＆＃13;

Answer 1

你尝试过这样的事吗？

var headerText = document.getElementById("headerText");

for (var i = 1; i < 4; i++) {
  (function(index){
    document.getElementById('H' + index).addEventListener("click",
      function(){
        headerText.focus();
        headerText.value = this.innerHTML;
      });
  })(i);
}

基本上，我们的想法是创建一个IIFE来捕获闭包中循环变量的范围。

另请注意，您不需要拥有存储所有标头节点的数组，因为您可以使用this从点击处理程序上下文中获取它们。

AddEventListener用于循环闭包

1 个答案: