javascript - HTML 表格未在客户端呈现

Question

我正在使用 JavaScript 动态创建 HTML 表，通过 innerHTML 将内容插入到我页面上的 div 中。该代码按原样运行，没有任何问题。但是，当我查看页面源代码时，它没有在 div 内显示任何数据。

请帮忙，我在查看页面源代码时需要 div 内的数据。

    function generateHTML(data) {
        var vData = eval('(' + data.d + ')');
        var vHTML = "  <table border='0' cellpadding='1' cellspacing='0'  width='100%'>";


        vHTML += " <tr >";
        vHTML += " <th width='33%' align='left' colspan='2' class='headerStyle'><b>EARNINGS</b></th><th class='headerStyle' width='33%' align='left' colspan='2'><b>DEDUCTION</b></th><th width='33%' align='left' colspan='2' class='headerStyle'><b>EARNINGS</b></th> ";
         //1st row            
        vHTML += " <tr class='rowStyle'><td width='16%'>Basic Salary</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Employee PF Contribution</td><td width='16%'></td>";
        vHTML += " <td width='16%'>PROJECTED INCOME TAX</td><td width='16%'></td>";
        vHTML += " </tr>";
        //2nd row            
        vHTML += " <tr class='rowStyle'><td width='16%'>Supplementary Allowance</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Employee VPF Contribution</td><td width='16%'></td>";
        vHTML += " <td width='16%'>Less : Exemption U/S 10</td><td width='16%'></td>";
        vHTML += " </tr>";
        //3rd row
        vHTML += " <tr class='rowStyle'><td width='16%'>Metro Allowance</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Professional Tax</td><td width='16%'></td>";
        vHTML += " <td width='16%'>Less : Prof Tax</td><td width='16%'></td>";
        vHTML += " </tr>";
        //4th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>Fuel/Conveyance Allowance</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Loan</td><td width='16%'></td>";
        vHTML += " <td width='16%'>Income U/H Salary</td><td width='16%'></td>";
        vHTML += " </tr>";
        //5th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>Leave Encashment</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Loan Interset</td><td width='16%'></td>";
        vHTML += " <td width='16%'>Other Income</td><td width='16%'></td>";
        vHTML += " </tr>";
        //6th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>Car Maint. Allow.</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'></td><td width='16%'></td>";
        vHTML += " <td width='16%'>G.Total Income</td><td width='16%'></td>";
        vHTML += " </tr>";
        //7th row           
        vHTML += " <tr class='rowStyle'><td width='16%'>Cash in liew of Car</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'></td><td width='16%'></td>";
        vHTML += " <td width='16%'>Ded.Chapter VI-A</td><td width='16%'></td>";
        vHTML += " </tr>";
        //8th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>HRA</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'></td><td width='16%'></td>";
        vHTML += " <td width='16%'>Other deduction</td><td width='16%'></td>";
        vHTML += " </tr>";
        //9th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>LTA</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'></td><td width='16%'></td>";
        vHTML += " <td width='16%'>Total Income</td><td width='16%'></td>";
        vHTML += " </tr>";
        //10th row          
        vHTML += " <tr class='rowStyle'><td width='16%'>Bonus</td><td width='16%'>" + vData.EmployeeDetails[0].Code + "</td>";
        vHTML += " <td width='16%'>Income Tax</td><td width='16%'></td>";
        vHTML += " <td width='16%'>Tax on Total Income</td><td width='16%'></td>";
        vHTML += " </tr>";

        vHTML += " </table></td></tr>";
        //New Add for earning, Deduction and Income tax

        vHTML += "</table> ";
        dvSalarySlip.innerHTML = vHTML;

    }
</script>

Answer 1

答案:

查看页面源代码不会显示 Javascript 所做的修改。如果您想亲自查看它，某些浏览器会让您通过按 CTRL+A 选择整个页面，然后右键单击并单击“查看选择源”来查看它。如果您希望用户看到它，您将需要使用 php 或其他一些服务器端预处理器语言。

提示:以下是有关您的代码的一些提示:

看来你应该使用:

document.getElementById("dvSalarySlip").innerHTML = vHTML; 

而不是:

dvSalarySlip.innerHTML = vHTML;

此外，您需要删除多余的:

vHTML += " </tr>"; 

正如许多人所指出的。