1. 首页
  2. 问答
  3. ES6 - 模板字符串中变量的值不会增加

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

2017-10-20 56 views
-3

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

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

如何解决它的价值小窥？

来源

2017-10-20 CodeWalker

回答

1

你的i变量递增。问题是，当你的HTML被添加到你的rowForTable *字符串时，我等于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); 

    } 



});

来源

2017-10-20 10:31:14 RogerC

+1

OMG！太傻了：/ – CodeWalker

相关问题

 相关问题