0

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>
4

5 に答える 5

2

答え：

ページのソースを表示しても、Javascript による変更は表示されません。個人的に見たい場合は、CTRL+A を押してページ全体を選択し、右クリックして [選択ソースの表示] をクリックすると表示できるブラウザーもあります。ユーザーに表示させたい場合は、php またはその他のサーバー側のプリプロセッサ言語を使用する必要があります。

ヒント:コードに関するヒントを次に示します。

使用する必要があるようです：

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

それ以外の：

dvSalarySlip.innerHTML = vHTML;

また、余分なものを削除する必要があります。

vHTML += " </tr>";

多くの人が指摘したように。

于 2013-10-08T06:37:36.003 に答える
0

これを試してみてください。

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

    }
于 2013-10-08T06:44:32.697 に答える
0

おそらく、これをコードに追加してみてください

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

それはあなたのHTMLオブジェクトを取得するはずです

dvSalarySlipElement.innerHtml = vHTML;

また、2行目以降のタグから余分なものを閉じているようです。

お役に立てれば。

于 2013-10-08T06:23:46.057 に答える