td元素未解析为int

Question

我有一个ID为＃tab1的表。 对于每一行，我想计算“点数/匹配数”列的值并将其放入“系数”列中，但是我的代码不起作用。 这些数字不会解析为int。 我一直想知道elem [4] .innerHTML（z）; 可以设置系数。

 Average(); function Average() { var table = document.getElementById('tab1'), rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr'); //console.log(rows.length); for (var i = 0; i < rows.length; i++) { elem = rows[i].getElementsByClassName("columns"); var x = parseInt(elem[2]); var y = parseInt(elem[3]); // console.log(x+y," "); console.log(x, " ", y); var z = y / x; elem[4].innerHTML(z); } 

 <div id="mytable"> <table id="tab1"> <tr class="rows"> <th class="columns">#</th> <th class="columns">Team</th> <th class="columns">Matches</th> <th class="columns">Points</th> <th class="columns">Coeficiency</th> </tr> <tbody> <tr class="rows"> <td class="columns">1</td> <td class="columns">Baetasii</td> <td class="columns">3</td> <td class="columns">9</td> <td class="columns">100%</td> </tr> <tr class="rows"> <td class="columns">2</td> <td class="columns">Carcotasii</td> <td class="columns">2</td> <td class="columns">5</td> <td class="columns">100%</td> </tr> </tbody> </table> </div> 

Answer 1

好了，已经看过了你的代码，使一些指点，首先innerHTML不是一个函数，这是一个简单的属性，你可以将其重新分配，但是，我建议使用的textContent由于这样的事实，使用innerHTML ，你可以允许XSS发生。

我的意思是，我知道在特定情况下XSS可能不是问题，但是我认为提及这一点很有价值。

另外，正如我在上面的评论中提到的那样，使用parseInt时 ，您需要向其传递一个字符串，而不是最初执行的对象。 使用诸如getElementsByClassName或querySelectorAll函数，您将拥有一个类似于数组的对象，例如HTMLCollection ，其中包含许多对象，通常是Elements或Nodes 。

 Average(); function Average() { var table = document.getElementById('tab1'), rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr'); //console.log(rows.length); for (var i = 0; i < rows.length; i++) { elem = rows[i].getElementsByClassName("columns"); var x = parseInt(elem[2].textContent); var y = parseInt(elem[3].textContent); // console.log(x+y," "); console.log(x, " ", y); var z = y / x; elem[4].textContent = z; } } 

 <div id="mytable"> <table id="tab1"> <tr class="rows"> <th class="columns">#</th> <th class="columns">Team</th> <th class="columns">Matches</th> <th class="columns">Points</th> <th class="columns">Coeficiency</th> </tr> <tbody> <tr class="rows"> <td class="columns">1</td> <td class="columns">Baetasii</td> <td class="columns">3</td> <td class="columns">9</td> <td class="columns">100%</td> </tr> <tr class="rows"> <td class="columns">2</td> <td class="columns">Carcotasii</td> <td class="columns">2</td> <td class="columns">5</td> <td class="columns">100%</td> </tr> </tbody> </table> </div> 

编辑

我以为我还会包含一个更整洁的版本，它的逻辑作用足够接近，它或多或少只是使用更“功能样式”的更现代的JavaScript语法。 最初，我为简化起见基本上复制了与您提供的样式完全相同的样式，但是我认为这样做存在一些问题。 例如，您是如何对“ Average使用大写字母的，个人而言，如果是班级，我只会在名字的开头使用大写字母，这是个人选择，但是请随时不同意或坚持使用您所知道的！

我个人更喜欢用更现代的语法，我个人认为是更容易阅读，它更简洁明了，一般它看起来像更少的代码通读。

 // States if an array like object is empty or not. const isEmpty = a => a.length > 0; // Returns the text content of a html object. const txt = td => td == null ? null : td.textContent; // Simply updates the UI. const render = tds => v => tds[4].textContent = parseFloat(v).toFixed(2); // Works out whether or not to fire update or do nothing. const compute = tds => isEmpty(tds) ? render(tds)(txt(tds[3]) / txt(tds[2])) : null; // Gets the average for each tr. const avg = trs => trs.forEach(tr => compute(tr.querySelectorAll("td"))); // Fire the avg function. const update = () => avg(document.querySelectorAll("#tab1 tbody tr")); // Render tr tag. const renderTr = i => n => m => p => `<tr> <td>${i}</td><td>${n}</td><td>${m}</td><td>${p}</td><td></td> </tr>`; // Add a table row. const append = () => { const tbl = document.getElementById("tab1"); const i = document.querySelectorAll("#tab1 tbody tr").length, n = '_____', m = Math.floor(Math.random() * 10) + 1, p = Math.floor(Math.random() * 10) + 1; // Safe-ish because what's being entered is controlled 100%. // But generally try not to use innerHTML. tbl.innerHTML += renderTr(i)(n)(m)(p); update(); }; // Allow for auto add. document.getElementById("add").onclick = append; update(); // Initial run. 

 <div id="mytable"> <table id="tab1"> <tr class="rows"> <th class="columns">#</th> <th class="columns">Team</th> <th class="columns">Matches</th> <th class="columns">Points</th> <th class="columns">Coeficiency</th> </tr> <tbody> <tr class="rows"> <td class="columns">1</td> <td class="columns">Baetasii</td> <td class="columns">3</td> <td class="columns">9</td> <td class="columns">100%</td> </tr> <tr class="rows"> <td class="columns">2</td> <td class="columns">Carcotasii</td> <td class="columns">2</td> <td class="columns">5</td> <td class="columns">100%</td> </tr> </tbody> </table> </div> <button id="add">Add Row</button> 

Answer 2

使用Object＃values Array＃forEach #getElementsByTagName

主要问题是您需要使用innerText检索文本值。

您也不需要冗余的类名。

 const table = document.getElementById("table"); const rows = table.querySelectorAll("tbody > tr"); Object.values(rows).forEach(row => { const tds = row.getElementsByTagName('td'); if (tds.length === 5) { const x = parseInt(tds[2].innerText), y = parseInt(tds[3].innerText); const z = y / x; tds[4].innerText = `${z}`; } }); 

 <table id="table"> <tr> <th>#</th> <th>Team</th> <th>Matches</th> <th>Points</th> <th>Coeficiency</th> </tr> <tbody> <tr> <td>1</td> <td>Baetasii</td> <td>3</td> <td>9</td> <td>100%</td> </tr> <tr> <td>2</td> <td>Carcotasii</td> <td>2</td> <td>5</td> <td>100%</td> </tr> </tbody> </table> 

Answer 3

getElementsByClassName返回具有所有给定类名称的所有子元素的类似数组的对象。

由于我们有DOM元素的集合， elem[2]是DOM元素，因此您应该访问其textContent属性。

另外，您以错误的方式使用innerHTML属性。 只需更换

 elem[4].innerHTML(z);

至

 elem[4].innerHTML = z;

 Average(); function Average() { var table = document.getElementById('tab1'), rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { elem = rows[i].getElementsByClassName("columns"); var x = parseInt(elem[2].textContent); var y = parseInt(elem[3].textContent); console.log(x, " ", y); var z = y / x; elem[4].innerHTML = z; } } 

 <div id="mytable"> <table id="tab1"> <tr class="rows"> <th class="columns">#</th> <th class="columns">Team</th> <th class="columns">Matches</ht> <th class="columns">Points</th> <th class="columns">Coeficiency</th> <tbody> <tr class="rows"> <td class="columns">1</td> <td class="columns">Baetasii</td> <td class="columns">3</td> <td class="columns">9</td> <td class="columns">100%</td> </tr> <tr class="rows"> <td class="columns">2</td> <td class="columns">Carcotasii</td> <td class="columns">2</td> <td class="columns">5</td> <td class="columns">100%</td> </tr> </tbody> </table> </div>