python中删除按钮的实现_Python学习第162天（删除按钮bug修复、编辑模态对话框形式展现）...

Title

padding: 0px 20px;

font-size: 15px;

}

#delNid {

font-size: large;

}

#nothing {

color: #0f0f0f;

}

添加学生

添加学生(新)

ID姓名年龄性别班级操作

{% for row in stu_list %}{{ row.id }}{{ row.username }}{{ row.age }}{% if row.gender %}

男

{% else %}

女

{% endif %}

{{ row.cs.titile }}

删除

编辑

{% endfor %}

aria-hidden="true">×

添加学生

姓名

年龄

性别

男

女

班级

{% for row in cs_list %}{{ row.titile }}{% endfor %}

关闭

保存

确认删除学生信息

信息删除后将无法恢复！！！

确定

取消

aria-hidden="true">×

编辑学生信息

姓名

年龄

性别

男

女

班级

{% for row in cs_list %}{{ row.titile }}{% endfor %}

关闭

保存

bindEvent();

bindSave();

bindDel();

bindDelConfirm();

bindQuit();

bindEdit();

bindEditConfirm();

});//编辑学生信息确认

function bindEditConfirm() {

$('#btnEditSave').click(function () {var postData ={};

$('#editModal').find('input,select').each(function () {

console.log($(this)[0]);var v = $(this).val();var n = $(this).attr('name');if (n == 'gender') {if ($(this).prop('checked')) {

postData[n]=v;

}

}else{

postData[n]=v;

}

})

$.ajax({

url:'/edit_student.html/',

type:'POST',

data:postData,

success:function (arg) {var n =JSON.parse(arg)if(n.status){

window.location.reload()

}else{

alert(n.error)

}

}

})

})

}//编辑学生信息显示

function bindEdit() {

$('#tb').on('click','.edit-row',function () {

$('#editModal').modal('show');//显示后需要获取当前行的所有数据//此时点击标签的父集之前的所有数据，可以通过prevAll()获取

$(this).parent().prevAll().each(function () {var v = $(this).text();var n = $(this).attr('na');

console.log(n)if (n=='cs_id'){var cid = $(this).attr('cid');

$('#editModal select[name="cs_id"]').val(cid);

console.log("设置班级")

}else if(n=='gender'){var gid = $(this).attr('gid');

console.log('设置性别',gid)if(gid=='True'){

$('#editModal :radio[value="1"]').prop('checked',true);

console.log('是个男的')

}else{

$('#editModal :radio[value="0"]').prop('checked',true);

}

}else{

$("#editModal input[name='"+ n +"']").val(v)

}

})

})

}

function bindQuit() {

$('#quitDel').click(function () {

$('#delModal').modal('hide')

})

}

function bindDelConfirm() {

$('#delConfirm').click(function () {var rowId = $('#delNid').val();

console.log(rowId)

$.ajax({

url:'/del_student.html',

type:'GET',

data: {'nid': rowId},

success: function (arg) {var dict =JSON.parse(arg);if(dict.status) {

$('tr[nid="' + rowId + '"]').remove();

$('#delModal').modal('hide');

}

}

})

})

}

function bindDel() {

$('#tb').on('click','.del-row',function () {//此时因为弹窗跳出，弹窗内无法获得需要删除学生信息的id//所以在表格的tr标签内设置自定义变量 nid = {{ row.id }}//从而方便本次弹窗跳出事件后获得对应的id信息

var rowId = $(this).parent().parent().attr('nid');var rowName = $(this).parent().parent().attr('n_name');

console.log(rowId)

$('#delNid').val(rowId);

$('#delNid').text(rowName);

$('#delModal').modal('show');

})

}

function bindEvent() {

$('#addBtn').click(function () {

$('#addModal').modal('show');

})

}

function bindSave() {

$('#btnSave').click(function () {var postData = {};//关于postData，当点击“保存”按钮之后，//postData就成为{'username':'二百五','age':18,'gender':1,'cs_id':2}//类似以上这样的一个字典，而表格中的id等于后台返回的JSON.parse(arg).data

$('#addModal').find('input,select').each(function () {

console.log($(this)[0]);var v = $(this).val();var n = $(this).attr('name');if (n == 'gender') {if ($(this).prop('checked')) {

postData[n]=v;

}

}else{

postData[n]=v;

}

})

console.log(postData)

$.ajax({

url:'/add_student.html',

type:'POST',

data: postData,

success: function (arg) {

console.log(arg);var dict =JSON.parse(arg);if(dict.status) {//window.location.reload() 此时不利用刷新来实现添加成功，避免流量和计算的浪费

createRow(postData, dict.data);

$('#addModal').modal('hide');

}else{

$('#errorMessage').text(dict.message)

}

}

})

})

}

function createRow(postData, nid) {var tr = document.createElement('tr');

$(tr).attr('nid',nid);

$(tr).attr('n_name',postData.username);var tdId = document.createElement('td');

tdId.innerHTML=nid;

$(tr).append(tdId);var tdUsername = document.createElement('td');

tdUsername.innerHTML=postData.username;

$(tr).append(tdUsername);var tdAge = document.createElement('td');

tdAge.innerHTML=postData.age;

$(tr).append(tdAge);var tdGender = document.createElement('td');if (postData.gender == '0') {

tdGender.innerHTML= '女';

}else{

tdGender.innerHTML= '男';

}

$(tr).append(tdGender);var tdClass = document.createElement('td');var textClass = $('select[name="cs_id"]').find('option[value="' + postData.cs_id + '"]').text();

tdClass.innerHTML=textClass

$(tr).append(tdClass)var tdHandle = '

删除' +

'编辑

'$(tr).append(tdHandle)

$('#tb').append(tr)

console.log($(tr).attr('nid'))

console.log($(tr).attr('n_name'))

}