[英]Dynamically append rows to a HTML table
I am able to append table rows dynamically but encounter a problem when I am embedding values. 我能够动态追加表行,但是在嵌入值时遇到问题。
I am using jinja2. 我正在使用jinja2。
Example: 例:
My input by textbox is like this: 我的文本框输入如下:
Date From: 20130201 * id is "txtStartDate" 起始日期:20130201 * id为“ txtStartDate”
To: 20130205 * id is "txtEndDate" 收件人:20130205 * id为“ txtEndDate”
Number: 10 * id is "txtAllotNumber" 号码:10 * id为“ txtAllotNumber”
Output should be like this: 输出应如下所示:
□ 20130201 10 blank □20130201 10空白
□ 20130202 10 blank □20130202 10空白
□ 20130203 10 blank □20130203 10空白
□ 20130204 10 blank □20130204 10空白
□ 20130205 10 blank □20130205 10空白
□ is a checkbox □是一个复选框
the blank part should be edited also. 空白部分也应进行编辑。
This is the output which is incorrect: 这是不正确的输出:
20130210 20130205 10 blank 20130210 20130205 10空白
This is how I am appending the table: 这就是我追加表格的方式:
var chkflg = "";
var newtrtag = '<tr class="centertext getData">';
newtrtag += '<td class="checkGet" style="padding-left: 20px;"><input class="chkGetData" type="checkbox" name="del_param" value="{{stay_ymd}},{{allot_number}},{{delete_flag}},{{re_release_ymd}}"></td>';
newtrtag += '<input type="hidden" id="quantity{{stock_count}}" name="quantity{{stock_count}}" value="{{allot_number}}">';
newtrtag += '<input type="hidden" name="save[{{stock_count}}]" value="{{stay_ymd}},{{allot_number}},{{delete_flag}},{{re_release_ymd}}">';
newtrtag += '{% set delete_flag_val = '0'%}';
newtrtag += '{% if delete_flag %}';
newtrtag += '{% set delete_flag_val = '1' %}';
newtrtag += '{% else%}';
newtrtag += '{% endif %}';
newtrtag += '<input type="hidden" id="delflag{{stock_count}}" name="delflag{{stock_count}}" value="{{delete_flag_val}}">';
newtrtag += '<input type="hidden" id="rerel{{stock_count}}" name="rerel{{stock_count}}" value="{{re_release_ymd}}">';
newtrtag += '<td style="width:70%;">'+ $("#txtStartDate").val() +' </td>';
newtrtag += '<td style="width:70%;">'+ $("#txtEndDate").val() +' </td>';
newtrtag += '<td style="width:70%;">'+ $("#txtAllotNumber").val() +' </td>';
newtrtag += '{% set delete_flag_chk = "" %}';
newtrtag += '{% if delete_flag == True %}';
newtrtag += '{% set delete_flag_chk = "Released" %}';
newtrtag += '{% else%}';
newtrtag += '{% set delete_flag_chk = "Unreleased" %}';
newtrtag += '{% endif %}';
newtrtag += '<td class="colStatus">{{delete_flag_chk}}</td>';
newtrtag += '<td class="releaseDate">{{re_release_ymd}}</td>';
newtrtag += '</tr>';
$("#list_body").append(newtrtag);
The whole tbody code is like this where I am adding it: 整个肢体代码如下所示:
<tbody id="list_body">
{% set stock_count = 0 %}
{% for row in release_stock_list %}
<tr class="centertext getData">
<td class="checkGet" style="padding-left: 20px;"><input class="chkGetData" type="checkbox" name="del_param" value="{{row.stay_ymd}},{{row.allot_number}},{{row.delete_flag}},{{row.re_release_ymd}}"></td>
<input type="hidden" id="quantity{{stock_count}}" name="quantity{{stock_count}}" value="{{row.allot_number}}">
<input type="hidden" name="save[{{stock_count}}]" value="{{row.stay_ymd}},{{row.allot_number}},{{row.delete_flag}},{{row.re_release_ymd}}">
{% set delete_flag_val = '0'%}
{% if row.delete_flag %}
{% set delete_flag_val = '1' %}
{% else%}
{% endif %}
<input type="hidden" id="delflag{{stock_count}}" name="delflag{{stock_count}}" value="{{delete_flag_val}}">
<input type="hidden" id="rerel{{stock_count}}" name="rerel{{stock_count}}" value="{{row.re_release_ymd}}">
<td class="colDate">{{row.stay_ymd}}</td>
<td class="colAmount">{{row.allot_number}}</td>
{% set delete_flag_chk = "" %}
{% if row.delete_flag == True %}
{% set delete_flag_chk = "Released" %}
{% else%}
{% set delete_flag_chk = "Unreleased" %}
{% endif %}
<td class="colStatus">{{delete_flag_chk}}</td>
<td class="releaseDate">{{row.re_release_ymd}}</td>
{% set stock_count = stock_count + 1 %}
</tr>
{% endfor %}
</tbody>
Thanks for the help. 谢谢您的帮助。
Usually, this sort of thing is done by cloning existing rows; 通常,这种事情是通过克隆现有行来完成的。 you might have a hidden template row you'd clone.
您可能会克隆一个隐藏的模板行。 This avoid all sorts of issues such as yours.
这样可以避免各种问题,例如您的问题。 Have a look at this question .
看看这个问题 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.