Question

我需要仅在所选内容中更改文本细胞。第一次一切都很顺利。当我在另一个单元格中尝试时，文本也会按原样进行更改，但同时也会在前一个单元格中进行更改，依此类推。

//change text
var changeText = function(e) {
  var inputChangeText, applyChanges, blockTd;
  inputChangeText = document.getElementById('changeText');
  applyChanges = document.getElementById('applyToChanges');

  inputChangeText.value = e.target.textContent;

  applyChanges.addEventListener('click', function() {
    e.target.textContent = inputChangeText.value;
  }, false);
}

//allow to change
function eventsInTable() {
  var checkBoxChanges = document.getElementById('changes');
  var table = document.getElementById('tableCinema');

  if (checkBoxChanges.checked) {
    table.addEventListener('click', changeText, false);
  } else {
    table.removeEventListener('click', changeText, false);
    alert("You haven't access to change");
  }
}

<table id="tableCinema">
  <tr>
    <th>Type</th>
  </tr>
  <tr>
    <td>1</td>
    <td>*</td>
    <td>*</td>
  </tr>
</table>

Change: <input id="changes" type="checkbox" name="" onclick="eventsInTable()"><br> Get text for change: <input id="changeText" type="text" name="" value="">

<button id="applyToChanges">Apply</button>

Answer 1

希望这会对你有所帮助。

var input = document.querySelector('#changeText');
var button = document.querySelector('#applyToChanges');
var table = document.querySelectorAll('table tr td');

var tobechanged = null; // remembers which td was last clicked
for(i=0;i<table.length;i++){ // adds onclicked event for every td element
  table[i].onclick = function(){ 
    tobechanged = this; 
    input.value = this.innerHTML; 
  }
}

button.onclick = function(){
  tobechanged.innerHTML = input.value; // make changes to innerhtml of last td clicked.
}

table td{
border:1px solid black;
}

<table id="tableCinema">
    <tr>
        <th >Type</th>
    </tr>                   
    <tr>
        <td >1</td><td >*</td><td >*</td>
    </tr>                   
</table>

Get text for change: <input id="changeText" type="text" name="" value="">

<button id="applyToChanges">Apply</button>

Answer 2

每次拨打changeText()时，都会添加另一个侦听器，当您点击Apply按钮时，它们都会运行。

不要在changeText()中添加侦听器，只需将全局变量设置为需要更改的元素。

＆＃13;

var targetElement;

var inputChangeText = document.getElementById('changeText');

var applyChanges = document.getElementById('applyToChanges');
applyChanges.addEventListener('click', function() {
  if (targetElement) {
    targetElement.textContent = inputChangeText.value;
  }
}, false);

//change text
var changeText = function(e) {
  inputChangeText.value = e.target.textContent;
  targetElement = e.target;
}
//allow to change
function eventsInTable() {
  var checkBoxChanges = document.getElementById('changes');
  var table = document.getElementById('tableCinema');

  if (checkBoxChanges.checked) {
    table.addEventListener('click', changeText, false);
  } else {
    table.removeEventListener('click', changeText, false);
    alert("You haven't access to change");
  }
}

＆＃13;

<table id="tableCinema">
  <tr>
    <th>Type</th>
  </tr>
  <tr>
    <td>1</td>
    <td>*</td>
    <td>*</td>
  </tr>
</table>

Change: <input id="changes" type="checkbox" name="" onclick="eventsInTable()"><br> Get text for change: <input id="changeText" type="text" name="" value="">

<button id="applyToChanges">Apply</button>

＆＃13;

这个处理程序出了什么问题？ JS

2 个答案: