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>"; 

正如许多人所指出的那样。

Answer 2

页面源仅显示从服务器接收到的文本/字符串。它不显示浏览器呈现的内容。一旦浏览器完成对 HTML 的解析，它就不再关心页面源。它只依赖于 DOM。

在通过网络传输 HTML 文本/字符串后，页面上发生的一切都基于 DOM。从浏览器的角度来看，页面源实际上已经不存在了。查看页面源的功能只是方便开发者查看服务器发送的内容。大多数现代浏览器都有一个类似的功能，可以让开发人员查看实时 DOM：开发人员工具菜单/选项卡/窗格/窗口中的 DOM 浏览器/查看器。

当您添加 时innerHTML，显然页面源不会改变。因为它的目的是向您展示服务器发送的内容以及innerHTML客户端上发生的事情。要查看更改，您应该检查 DOM 浏览器/查看器。

Answer 3

也许您可以尝试将其添加到您的代码中

var dvSalarySlipElement = document.getElementById('dvSalarySlip');

那应该得到你的 HTML 对象然后你可以做

dvSalarySlipElement.innerHtml = vHTML;

此外，您似乎正在关闭从第 2 行开始的额外标签。

希望这可以帮助。

Answer 4

1. html 表的错误标记会导致错误的页面源。您有多余的"</tr>"标签。

2. FireFox 检查器的错误使用。

我使用firefox，我在页面上只有一个div，名称为dvSalarySlip，我使用javascript生成html，最后我在div中附加了javascript html。它显示在浏览器中，但是当我进入页面源时，它是空白的 div。我需要页面源上的数据来完成另一项工作——Arun Singh

右键单击 div 并从上下文菜单中选择 Inspect Element with Firebug。或者只需按 F12 并打开 HTML 选项卡。

Answer 5

试试这个。

function generateHTML(data) {
        var vData = eval('(' + data.d + ')');
        var code = vData.EmployeeDetails[0].Code; // added this line

        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> ";
        vHTML += " </tr>";
        //1st row

        if(code != undefined){ // added this line

            vHTML += " <tr class='rowStyle'><td width='16%'>Basic Salary</td><td width='16%'>" + 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>";
       }

        vHTML += " </table>";
        //New Add for earning, Deduction and Income tax
        dvSalarySlip = document.getElementById('dvSalarySlip'); // added this line

        if(dvSalarySlip != undefined){ // added this line
            dvSalarySlip.innerHTML = vHTML;
        }

    }