ES6 - 模板字符串中变量的值不会增加

【问题标题】：ES6 - Value of a variable in template string does not incrementES6 - 模板字符串中变量的值不会增加
【发布时间】：2017-10-20 10:07:14
【问题描述】：

我在单击按钮时动态地将行添加到表中。 HTML 包含在 `` 中，并且必须在每行添加时递增的值包含在模板字符串中。即使当变量的值增加时，它也不会显示通过反引号和模板字符串呈现在 HTML 中的更新值。

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <table class="MsoNormalTable" id="table1" style="border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0">
        <tbody>
            <tr style="height: 22.3pt;">
                <td style="width: 128.55pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="171">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">FUND:</span></strong></p>
                </td>
                <td style="width: 177.2pt; border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="236">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.u_benefit_type1}<br /> <br /> <br /> </span></strong></p>
                </td>
            </tr>
            <tr style="height: 22.3pt;">
                <td style="width: 128.55pt; border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="171">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">NAME OF EMPLOYEE:</span></strong></p>
                </td>
                <td style="width: 177.2pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="236">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.employee.name1}<br /> <br /> <br /> </span></strong></p>
                </td>
            </tr>
            <tr style="height: 20.7pt;">
                <td style="width: 128.55pt; border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 20.7pt;" valign="top" width="171">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">EMPLOYEE NUMBER:</span></strong></p>
                </td>
                <td style="width: 177.2pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 20.7pt;" valign="top" width="236">
                    <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.u_employee_number1}<br /> <br /> </span></strong></p>
                </td>
            </tr>
        </tbody>
    </table>
    <br/><br/>
    <table class="MsoNormalTable" id="table2" style="margin-left: -4.75pt; border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0">
        <tbody>
            <tr style="height: 29.65pt;">
                <td style="border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Surname</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">First Names</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Gender</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Date of Birth</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Relationship</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Share of Benefit</span></p>
                </td>
                <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Contact No.</span></p>
                </td>
            </tr>
            <tr style="height: 89.5pt;">
                <td style="border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_surname1}</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_first_name1}&nbsp;</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_gender1}</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_date_of_birth1}</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_relationship1}</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_share_of_benefit1}</span></p>
                </td>
                <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                    <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_contact_number1}</span></p>
                </td>
            </tr>
        </tbody>
    </table>
    <br/><br/>
    <button id="add-rows">Add Rows</button>

</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<script>

    $(document).ready(function () {

        var i = 2;

        $('#add-rows').bind('click', function() {
            $('#table1 tbody').append(rowForTableOne);
            $('#table2 tbody').append(rowForTableTwo);
            i++;
        }); 

        var rowForTableOne = `<tr style="height: 22.3pt;">
                    <td style="width: 128.55pt; border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="171">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">FUND:</span></strong></p>
                    </td>
                    <td style="width: 177.2pt; border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="236">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.u_benefit_type${parseInt(i)}}<br /> <br /> <br /> </span></strong></p>
                    </td>
                </tr>
                <tr style="height: 22.3pt;">
                    <td style="width: 128.55pt; border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="171">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">NAME OF EMPLOYEE:</span></strong></p>
                    </td>
                    <td style="width: 177.2pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 22.3pt;" valign="top" width="236">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.employee.name${i}}<br /> <br /> <br /> </span></strong></p>
                    </td>
                </tr>
                <tr style="height: 20.7pt;">
                    <td style="width: 128.55pt; border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 20.7pt;" valign="top" width="171">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">EMPLOYEE NUMBER:</span></strong></p>
                    </td>
                    <td style="width: 177.2pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 20.7pt;" valign="top" width="236">
                        <p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 12.0pt; font-family: 'Arial','sans-serif'; color: black;">#{u_beneficiary_record_id.u_employee_number${i}}<br /> <br /> </span></strong></p>
                    </td>
                </tr>`;


         var rowForTableTwo = `<tr style="height: 29.65pt;">
                    <td style="border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Surname</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">First Names</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Gender</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Date of Birth</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Relationship</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Share of Benefit</span></p>
                    </td>
                    <td style="border: solid windowtext 1.0pt; border-left: none; padding: 0in 5.4pt 0in 5.4pt; height: 29.65pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">Contact No.</span></p>
                    </td>
                </tr>
                <tr style="height: 89.5pt;">
                    <td style="border: solid windowtext 1.0pt; border-top: none; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_surname${i}}</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_first_name${i}}&nbsp;</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_gender${i}}</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_date_of_birth${i}}</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_relationship${i}}</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_share_of_benefit${i}}</span></p>
                    </td>
                    <td style="border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; height: 89.5pt;" valign="top" nowrap="nowrap">
                        <p style="margin: 0in 0in 0.0001pt; text-align: center; line-height: normal; font-size: 11pt; font-family: Calibri, sans-serif;" align="center"><span style="color: black;">#{u_beneficiary_record_id.u_dependant_contact_number${i}}</span></p>
                    </td>
                </tr>`;

    });


</script>

</html>

我如何尝试使用i 的值的一个小窥探

<span style="color: black;">#{u_beneficiary_record_id.u_dependant_contact_number${i}}</span>

我该如何解决？

【问题讨论】：

    标签： javascript html ecmascript-6


    【解决方案1】：

    你的 i 变量增加了。问题是，当您的 HTML 添加到您的 rowForTable* 字符串时，i 等于 2，并且当它更改时，它不会影响您的字符串。

    您应该将生成 HTML 的代码放在一个单独的函数中，并将您的增量作为参数传递：

    $(document).ready(function () {

    // the increment variable was renamed to avoid confusion
    var increment = 2;

    $('#add-rows').bind('click', function() {
        // calling the appendRow function and passing the increment as a parameter : 
        appendRow(increment++);
    }); 

    // the fonction that will generate your HTML code with a variable 'i' passed as parameter :
    function appendRow(i) {
        var rowForTableOne = ...; // put your previous code here
        var rowForTableTwo = ...; // put your previous code here

        // appending the rows to your document : 
        $('#table1 tbody').append(rowForTableOne);
        $('#table2 tbody').append(rowForTableTwo);

    }



});

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2016-09-19
      • 2012-01-29
      • 1970-01-01
      • 1970-01-01
      • 2020-02-07
      • 2017-01-15
      • 1970-01-01
      • 2014-09-14
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode