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

html表格错误的标记会导致页面来源错误。您有多余的"</tr>"代码。
FireFox检测器的使用不正确。

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

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

enter image description here

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

    }

HTML表不在客户端呈现

5 个答案: