如何阻止innerHtml表一遍又一遍地重复自己?

Posted

技术标签:

【中文标题】如何阻止innerHtml表一遍又一遍地重复自己?【英文标题】:How to stop a innerHtml table repeating itself over and over and over again? 【发布时间】:2014-09-04 20:46:16 【问题描述】:

我已经创建了一个数组,其中包含从三个不同的用户变量获取信息的对象,但是在其中一个上有许多子变量,我不希望它在每次用户按下选择按钮时重复自身(更新表格)而不是我希望它只是添加到(或删除)它已经在表格中的部分。谢谢(如果您需要变量代码,请告诉我)请帮助!我真的需要一个解决方案!

//creating array
var gProducts = new Array();
var gTotalCost = 0;



// Adding Products to array gProducts
    function addProduct

var product = new Object();
product.name = name;
product.cost = cost;
gProducts.push(product);
gTotalCost += parseInt(cost)



 //Getting products from array, use of for in loop setting new table rows in blank var for each array item
function renderProducts()

var htmladd = ""

for (var i in gProducts)

if( gProducts[i].cost > 0)
    HTMLadd = HTMLadd + 
    "<tr>"+ 
    "<td class='tableSettings00' id=tableRow2 >" + gProducts[i].name +
    "</td>"+
    "<td class='tableSettings'>€<span id=tableRow2part2>" + gProducts[i].cost +
    "</span></td>"+ 
    "</tr>";
    
    else 
    
    

document.getElementById('tableRow').innerHTML = HTMLadd;


【问题讨论】:

这是一个谷歌翻译的问题吗?我能理解每一个单词,但我不知道它们像这样放在一起意味着什么。 我不知道getElementById('tableRow') 是什么,但它听起来像一个表格行。用一堆其他表格行替换它的内部 HTML 是不明智的。您将使您的 HTML 无效。 您不应该对数组使用“for in”循环。这可能是其中的一部分。而是使用for (var i = 0; i &lt; gProducts.length; i++) 另外,将tableRow2tableRow2part2 这样的id 添加到您在循环中创建的元素是不明智的。元素 ID 在整个页面中应该是唯一的。 很难理解你在问什么。您能否在jsfiddle.net 创建一个示例以更好地解释您想要实现的目标? 【参考方案1】:

在循环中,您总是遍历整个gProducts,因此每次执行该函数时,已放入表中的值都会翻倍。

此示例使用HTMLTableElement 中的一些方法来创建新的行和单元格。它还有一个计数器 (index) 保存每次迭代的起始位置。

var index = 0; // Counter for holding the current position in gProducts

function renderProducts () 
    var n, row, cell, span;        
    for (n = index; n < gProducts.length; n++)  // Start looping from the first new index in gProducts
        if (gProducts[n].cost > 0) 
            row = table.insertRow(-1); // Inserts a row to the end of table
            cell = row.insertCell(-1); // Inserts a cell to the end of the newly-created row
            cell.className = 'tableSettings00'; // Sets class for the cell
            cell.id = 'tableRow' + index; // Sets an unique id for the cell
            cell.innerHTML = gProducts[n].name; // Sets the content for the cell
            cell = row.insertCell(-1); // Create another cell to row
            cell.className = 'tableSettings';
            cell.id = 'tableRowPart' + index;
            cell.innerHTML = '€';
            span = document.createElement('span'); // Creates an empty span element
            span.id = 'tableRow2part' + index; // Sets an unique id for span
            span.appendChild(document.createTextNode(gProducts[n].cost)); // Appends some text to the span
            cell.appendChild(span); // Appends the span to the cell
        
    
    index = n; // Sets counter equal to the length of gProducts

A live demo at jsFiddle.

作为旁注,我个人不喜欢将ids 用于表格中的元素。如果需要ids,则可能是您的表格构建不正确,或者数据不适合在表格中显示。

您可以使用索引和table.rowsrows.cells 集合来查找单元格,如果必须从单元格中搜索某些元素,请使用单元格的firstElementChildnextElementSibling 属性来查找它们。

【讨论】:

好的,谢谢,但是添加行后如何添加删除行的方法? 我更新了the example fiddle,现在每一行都包含一个删除按钮。

以上是关于如何阻止innerHtml表一遍又一遍地重复自己?的主要内容,如果未能解决你的问题,请参考以下文章

如何防止 Firebase 一遍又一遍地创建同一个用户?

CSS轮播只一遍又一遍地显示最后一张图片

为啥 OnPreRender 被一遍又一遍地调用?

为啥这不会一遍又一遍地返回一个新值?爪哇

一遍又一遍地运行代码

如何装饰一个类的所有函数而不为每个方法一遍又一遍地键入它? [复制]