世界。我还是 Python 和 JavaScript 的新手,所以我的代码和我的方法对于有经验的开发人员来说可能看起来有点“奇怪”,但希望我今天能学到一两件事。
我有一个 HTML 页面,其中一些代码由 django 生成:
Django函数生成html表格代码:
def calendar_days_define(cMonth, cYear):
Calendar = []
calendarMatrix = calendar.monthcalendar(cYear, cMonth)
for element in calendarMatrix:
Calendar.append('<tr>')
weekday = 0
for i in element:
weekday += 1
if weekday > 5:
if i > 0:
Calendar.append('<td class="days_Weekends_days">{0}</td>'.format(i))
else:
Calendar.append('<td class="days_Weekends_days"></td>')
else:
if i > 0:
Calendar.append('<td class="days_Works_days">{0}</td>'.format(i))
else:
Calendar.append('<td class="days_Works_days"></td>')
Calendar.append('</tr>')
DoneCalendar = ''.join(Calendar)
DoneCalendar = '<table id="calendar_Inside_Changeable_Mesh">{0}</table>'.format(DoneCalendar)
return DoneCalendar
它生成漂亮的日历,包含在 HTML 表格中,正是我需要的。当我想为不同月份生成一个新表时,就会出现问题。我需要生成新的日历表,所以我使用 JavaScript 的 ajax 调用让 django 为我生成一个新的 HTML 表代码,然后用新表替换旧表:
function redrawCalendar(cMonth, cYear) {
$.ajax({
type: 'POST',
url: '/edit/ajax_change_calendar',
data: {cMonth: cMonth, cYear: cYear},
success: function (data) {
$('#calendar_Inside_Changeable_Mesh').replaceWith(data);
}
})
}
这给了我一个不错的新表,但问题是我无法访问这个新表。例如:
$('.days_Work_days').css("color","red")
不再工作。为什么?我感觉更合适的方法是在客户端通过 JavaScript 为表格生成代码,如果是这种情况我会重写它,但这个问题仍然困扰着我。如果有人可以在这里帮助我,我将不胜感激,谢谢。
更新
这是我的初始 HTML 页面中发生更改的部分:
<table><tr><td> {{ defineCalendar|safe }} </td></tr></table>
当页面加载 django 用 id="calendar_Inside_Changeable_Mesh" 的日历表填充这个变量,然后源页面看起来像
<table><tr><td>
<table id="calendar_Inside_Changeable_Mesh"> ...a bunch of <tr> and <td> with days numbers as value... </table>
</td></tr></table>
我可以在 JS 中以 $('#calendar_Inside_Changeable_Mesh') 的形式访问此表。例如:
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
一切安好。当我想在不重新加载整个页面的情况下生成一个新的日历表时,我调用了我之前展示的 ajax JS 函数。之后的 HTML 部分如下所示:
<table><tr><td>
<table id="calendar_Inside_Changeable_Mesh"> ...a bunch of <tr> and <td> with different days numbers as value... </table>
</td></tr></table>
看起来几乎一样,但是当我再次这样做时:
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
什么都没有发生。
当我点击一个按钮时,JS会发生:
$('#calendarBtn_Back').click(function() {
redrawCalendar(cMonth, cYear)
)}
该按钮位于 calendar_Inside_Changeable_Mesh 表之外,但在包含它的表内。
最后更新
好吧,这对我来说很愚蠢。看在上帝的份上,我花了两天时间。我的错误是我没有向你们展示我在做什么。我说我用
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
实际上它看起来像这样:
var calendar_Inside_Changeable_Mesh = $('#calendar_Inside_Changeable_Mesh');
然后这个全局变量被用在一些函数中:
calendar_Inside_Changeable_Mesh.css('border-collapse','collapse');
当页面加载时一切正常。但是,当我用新的表动态替换表时,即使具有相同的 id,与变量的绑定显然会中断。当我在函数内移动变量声明时,每次函数调用问题解决时,变量都会绑定到元素。嗯,谢谢大家的回复。你的建议让我朝着正确的方向思考。下次我会确保发布准确和准确的片段。