编辑2

Question

我分配

时

// psuedo code
.innerHTML = [ a button here ]; // see exact code below

单击时不执行任何操作。有替代方法吗？还是不可能？

该表由JavaScript动态创建。在填充每个单元格时，将检查一个条件-如果满足，则会在下一个单元格中产生一个按钮。这可以正常工作并按预期运行，但是，单击该按钮不会执行任何操作。在检查源代码时，即使该按钮位于HTML页面上，也不会显示该按钮。

我尝试了元素，但没有用，我认为这是因为它是在表内部处理的，该代码是内部的。

// the culprit line
cell = row.insertCell(-1);  cell.innerHTML =  '<button class="calc" onclick="calculateGrade();"> + </button>';

不确定是否需要发布更多代码，但是此行应显示我正在尝试执行的操作。

该按钮必须动态完成，因为它会检查每一行。

出于教育目的：

为什么按钮无法响应？
有没有办法使这项工作保持原状？
还有另一种方法可以达到相同的结果吗？

编辑---------------------------------- 只是该函数调用的片段。遗漏了代码，因为它永远不会到达那里

function calculateGrade() {
    console.log('here'); // <--- THIS NEVER SHOWS UP, BUTTON IS NOT SENDING IT HERE
        // code cleared for clarity
    }

编辑2

for(let i=0; i < studentList.length-1; i++) {

        row = table.insertRow(-1);
        var
        cell = row.insertCell(-1);  cell.innerHTML = studentList[i];
        cell = row.insertCell(-1);  cell.innerHTML = grade      
        cell = row.insertCell(-1);  cell.innerHTML = maxGrade;
        cell = row.insertCell(-1);  cell.innerHTML = student.name;  

        if(student.grade < maxGrade) { // change later to within 90%
                cell = row.insertCell(-1);  cell.innerHTML =  '<button  onclick="calculateGrade();" > + </button>';
            }else{
        cell = row.insertCell(-1);  cell.innerHTML = 'Pass';
        }

}

Answer 1

操纵dom

如果您想操纵dom的“时间”，则应使用jQuery之类的框架或javascript自己的dom函数来操纵dom，而不要使用innerHTML。为什么？ HTML时不时地发生了变化，您不知道您的innerHTML将来是否正确（格式化）。以let min = 0; let max = 100; <InputRange {...props} onChange={value => { const processedValues = { ...value }; if (processedValues.min < min) { processedValues.min = min; } if (processedValues.max > max) { processedValues.max = max; } this.setState({ revenue: processedValues }); }} />为例，它适用于所有浏览器。

还有可能，将来编译器和引擎会进一步优化dom操纵功能。

动态监听器

如果您动态创建dom元素，则不必将侦听器声明为文本。

document.createElement

这也不太容易造成错字;）

动态元素的创建和重排

每当您更改dom中的可见更改时，浏览器填充都会触发重排。它将重新计算所有元素的大小。就像您想象的那样，添加“数百个”按钮将导致大量回流。

回流将不会在不可见的对象上触发。因此，如果您操纵很多元素，则最佳做法是使父级不可见，然后进行更改并使父级再次可见。在这种情况下，您仅触发两次重排。

Answer 2

    function myFunction() {
       var row = document.getElementById("myRow");
  var x = row.insertCell(-1);
      x.innerHTML =  '<button class="calc" onclick="calculateGrade();"> +button </button>';
    }


    function calculateGrade() {
      alert("Hi am working action");
    }

Check here the new add button is working when I am adding cell.innerHTML there will calc button and when you will click it will show "Hi am working action,"  I think it will help you 

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, td {
      border: 1px solid black;
    }
    </style>
    </head>
    <body>

    <p>Click the button to insert new cell(s) at the beginning of the table row.</p>

    <table>
      <tr>
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
      </tr>
       <tr id="myRow">
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
      </tr>
       <tr>
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
      </tr>
    </table><br>

    <button onclick="myFunction()">Try it</button>


    </body>
    </html>

Answer 3

请勿使用onevent属性：

<button ~~onclick =“ func（）”~~ >...</button>

使用onevent属性之一：

document.querySelector('button').onclick = function;

或一个eventListener：

document.querySelector('button').addEventListener('click', function)

使用 Event Delegation -一种编程模式，允许我们注册 单个事件处理程序 来监听 无限数量的元素 。这是一个简化的轮廓：

选择一个元素，作为我们要对事件做出反应的所有元素的共同祖先。这也包括window和document，但是window应该用于关键事件（例如document.onclick = calculateGrade）
回调函数（例如calculateGrade(e)）必须传递事件对象（event，evt或e是最常用的名称）。
使用事件属性Event.target（例如const tgt = e.target）引用被单击，更改，悬停等元素。
通过Event.target个控制语句（例如if...else）隔离if (tgt.matches('button')) {...

其余的代码只是为了演示而动态生成一个表。尽管在OP问题中生成表的代码是可疑的，但这不是问题的一部分，因此在演示中没有对该部分的解释。

const tData = [{
  name: 'zer00ne',
  grade: 100
}, {
  name: 'Trump',
  grade: 25
}, {
  name: 'Joe Average',
  grade: 75
}, {
  name: 'Slacker',
  grade: 50
}];
const tHdrs = [`<th>#</th>`, `<th>Name</th>`, `<th>Grade</th>`, `<th>&nbsp;</th>`];
const frag = document.createDocumentFragment();
const table = document.createElement('table');
frag.appendChild(table);
const title = table.createCaption();
title.textContent = 'Student Grades';
const head = table.createTHead();
const hRow = head.insertRow(-1);
let h = tHdrs.length - 1;
for (let th of tHdrs) {
  th = hRow.insertCell(0).outerHTML = tHdrs[h];
  --h;
}
let rowQty = tData.length;
let colQty = tHdrs.length;
const body = document.createElement('tbody');
table.appendChild(body);
for (let r = 0; r < rowQty; r++) {
  let row = body.insertRow(-1);
  for (let c = 0; c < colQty; c++) {
    let col = c => row.insertCell(c);
    let cell = col(c);
    if (c === 0) {
      cell.textContent = r + 1;
    } else if (c === colQty - 1) {
      if (tData[r].grade > 69) {
        cell.textContent = 'Pass';
      } else {
        cell.innerHTML = `<button>Calculate</button>`;
      }
    } else if (c === 1) {
      cell.textContent = tData[r].name;
    } else {
      cell.textContent = tData[r].grade;
    }
  }
}
const foot = table.createTFoot();
const fRow = foot.insertRow(-1);
const fCol = fRow.insertCell(0);
fCol.textContent = 'Passing grade is 70% or more.'
fCol.setAttribute('colspan', '4');
fCol.className = 'note';

document.body.appendChild(frag);

// Relevant Code
document.onclick = calculateGrade;

function calculateGrade(e) {
  const tgt = e.target;
  if (tgt.matches('button')) {
    let row = tgt.closest('tr');
    let grd = row.children[2].textContent;
    let num = parseFloat(grd);
    console.log(num);
  }
  return false;
}

:root {
  font: 400 5vh/1 Verdana;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 96%;
}

caption {
  font-weight: 700;
  font-size: 1.2rem;
}

th,
td {
  border: 2px ridge #000;
  min-height: 30px;
}

th:first-of-type {
  width: 10%;
}

th:nth-of-type(3) {
  width: 20%;
}

th:last-of-type {
  width: 25%
}

td:first-of-type,
td:nth-of-type(3) {
  text-align: center;
  font-size: 1.2rem;
  font-family: Consolas;
}

td:nth-of-type(3)::after {
  content: '%';
}

td:first-of-type.note {
  text-align: right;
  font-size: 0.85rem;
  font-family: Verdana;
  border: none
}

button {
  font: inherit;
  width: 100%
}

JavaScript为innerHTML分配了一个按钮，但是没有单击

编辑2

3 个答案: