我需要使用“ gridWrapper.innerHTML = gridWrapper.innerHTML +”打印表格

时间:2019-04-19 09:15:28

标签: javascript jquery html ajax

我正在尝试打印一张填充有数据的表格。 问题是,一旦我打印了表格的标题,标签也会被打印出来,并且由于我不能使用,它不允许我在表格中插入任何数据。

唯一打印的是您在for循环中可以看到的数据和按钮

function elimina(id)
{
     var gridWrapper = document.querySelector('.content');
     $.ajax({url: "selezioneProdotti.php", success: function(result)
     {
        console.log(result);
        result = JSON.parse(result);
        gridWrapper.innerHTML = " ";
        gridWrapper.innerHTML=gridWrapper.innerHTML+"<table><tr> 
        <th>Nome</th><th>Categoria</th><th>Prezzo</th><th>Elimina</th></tr>";
        for(var i =0;i<result.length;i++)
        {           
            gridWrapper.innerHTML = gridWrapper.innerHTML+"<tr><td>"+ 
            result[i].nome+"</td><td>"+result[i].categoria+"</td> 
            <td>"+result[i].prezzo+"</td><td><a style='color:red'>&#x274C 
            Elimina</a></td></tr>";     
         }
         gridWrapper.innerHTML=gridWrapper.innerHTML+"</table>";
    }});
}

for(var i =0;i<result.length;i++)
        {           
            gridWrapper.innerHTML = gridWrapper.innerHTML+"<tr><td>"+ 
            result[i].nome+"</td><td>"+result[i].categoria+"</td> 
            <td>"+result[i].prezzo+"</td><td><a style='color:red'>&#x274C 
            Elimina</a></td></tr>";     
         }

我希望表格标签在表格完全打印之前不关闭

1 个答案:

答案 0 :(得分:0)

如下更新功能。 在这里,我声明了一个临时变量,该变量存储内部html字符串,并最后设置element的内部Html属性。

function elimina(id)
{
     var gridWrapper = document.querySelector('.content');
     $.ajax({url: "selezioneProdotti.php", success: function(result)
     {
        console.log(result);
        result = JSON.parse(result);
        gridWrapper.innerHTML = " ";
        var tableTemplate= "<table><tr> 
        <th>Nome</th><th>Categoria</th><th>Prezzo</th><th>Elimina</th></tr>";
        for(var i =0;i<result.length;i++)
        {           
           tableTemplate = tableTemplate+"<tr><td>"+ 
            result[i].nome+"</td><td>"+result[i].categoria+"</td> 
            <td>"+result[i].prezzo+"</td><td><a style='color:red'>&#x274C 
            Elimina</a></td></tr>";     
         }
         
         tableTemplate=tableTemplate+"</table>";
         gridWrapper.innerHTML = tableTemplate;
    }});
}