ES6 - 模板字符串中变量的值不会增加
问题描述:
我在按钮单击时动态地将行添加到表上。 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} </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}} </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>
如何解决它的价值小窥?
答
你的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);
}
});
OMG!太傻了:/ – CodeWalker