我正在尝试更新包含输入框的单元格内的文本。
在行{% extends "base.html" %}
{% block head_scripts %}
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
{% endblock %}
{% block title %}
Schedule Match
{% endblock %}
{% block styles %}
<style type="text/css">
tfoot {
display: table-header-group;
}
</style>
{% endblock %}
{% block content %}
<table id='pm_table' class="display" cellspacing="0" width="100%">
<thead>
<tr>
{% for col_name in table_headers%}
<th>{{col_name}}</th>
{% endfor %}
</tr>
</thead>
<tfoot>
<tr>
{% for col_name in table_headers%}
<th>{{col_name}}</th>
{% endfor %}
</tr>
</tfoot>
<tbody>
{% for data_row in table_data%}
<tr>
{% for item in data_row%}
<td>{{item}}</td>
{% endfor%}
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
var SITE_ID_COL = 0;
var PRIORITY_COL = 3;
var IS_SCHEDULED_COL = 4;
// priority input box
$("#pm_table td:nth-child(" + PRIORITY_COL + ")").each(function() {
// $(this).children().css('visibility', 'hidden');
$(this).css('text-align', 'center');
// $(this).css('font-size', 0);
var $input_box = $('<input type="text" class="priority_changed" />')
$input_box.prop('value', $(this).text());
$input_box.prop('size', 1);
$input_box.css('text-align', 'center');
$input_box.prependTo(this);
});
// remember old value of input box
$("#pm_table td:nth-child(" + PRIORITY_COL + ")").on('focus', '.priority_changed', function() {
this.old_val = this.value;
});
// priority input box listener
$('#pm_table').on('change', '.priority_changed', function() {
var $changed_tr = $(this).closest('td').closest('tr');
var site_id = $changed_tr.children().eq(SITE_ID_COL).text();
var old_val = parseInt($(this).closest('td').text());
var ib = this;
// confirm change
if (!confirm('Change priority for site ' + site_id + ' from ' + this.old_val + ' to ' + this.value + " ?")) {
//revert input box value
$(this).prop('value', this.old_val);
} else {
// make the change in db
new_val = this.value;
var url = '/api/manage/schedule_match/set_priority/' + site_id + '/' + new_val + '/';
$.ajax({
type: 'POST',
url: url,
success: function(result) {
res = JSON.parse(result) // todo read res
alert('SUCCESSFULLY changed priority for site ' + site_id + ' from ' + ib.old_val + ' to ' + res.new_val + ".");
$(ib).closest('td').prop('textContent',888);
},
error: function() {
alert('ERROR updating database!');
//revert input box state
$(ib).prop('value', ib.old_val);
},
});
}
});
</script>
{% endblock %}
中，我将值888分配给文本，但这导致将单元格的文本分配给“888”，但也出于某种原因删除了输入框。
我的代码（Django模板）：
$(ib).closest('td').text(888);我尝试了$(ib).closest('td').childNodes[1].prop('text',888)和许多不同的属性，例如innerText，innerHtml，{{1}}但没有产生正确的方向。
我在这里做错了什么？
答案 0 :(得分：2)
您应该将模板更改为span td。像：
<tbody>
{% for data_row in table_data%}
<tr>
{% for item in data_row%}
<td><span>{{item}}</span></td>
{% endfor%}
</tr>
{% endfor %}
</tbody>
然后您可以使用$(ib).closest('td').children('span').text(888)更改文本而不删除输入框。