首页 > 代码库 > 《可编辑td》
《可编辑td》
/******************编辑出现编辑框，删除恢复原始状态（Befin）**************************/
$(".editALink").click(function () {
/*如果是“编辑”文字就变“保存”*/
var txt = $(‘#editALink‘).text();
if (txt == "编辑") {
$("#editALink").text("保存");
/*获取原来HTML的值*/
var htmlTxt = $(this).parent().parent().find(‘td:eq(2)‘).text();
/*表格的第一行的第三列添加输入框*/
$(this).parent().parent().find(‘td:eq(2)‘).html("<input type=‘text‘ class=‘tr2InputText‘ name=‘alumentReason‘ style=‘width:400px;height:30px;margin-left:12px‘/>");
/*将变量htmlTxt赋给INPUT*/
$(this).parent().parent().find(‘input‘).val(htmlTxt);
/*第四列添加单选按钮*/
$(this).parent().parent().find(‘td:eq(3)‘).html("<div class=‘radioButtonDIV‘><input type=‘radio‘ class=‘tr3RadioButton‘ checked=‘checked‘ name=‘ifCompute‘ value=http://www.mamicode.com/‘是‘/>是 否
/*添加选中边框*/
$(this).parent().parent().find(‘input‘).hover(function () {
$(this).toggleClass(‘toggleClassBorder‘);
});
/*添加选中边框*/
$(this).parent().parent().find(‘.radioButtonDIV‘).hover(function () {
$(this).toggleClass(‘toggleClassBorderDIV‘);
});
/*解绑radioButton的鼠标滑过事件*/
$(this).parent().parent().find(‘td:eq(3)‘).find(‘input‘).hover().unbind();
} else if (txt == "保存") {
/*获取input编辑框的输入值*/
var inputTxt = $(this).parent().parent().find(‘td:eq(2)‘).find(‘input‘).val();
/*将输入值赋给html*/
$(this).parent().parent().find(‘td:eq(2)‘).text(inputTxt);
/*获取input单选按钮的输入值*/
var inputRadioButton = $(this).parent().parent().find(‘td:eq(3)‘).find(‘input:checked‘).val();
/*将单选值赋给html*/
$(this).parent().parent().find(‘td:eq(3)‘).text(inputRadioButton);
/*将“保存”该为“编辑”*/
$("#editALink").text("编辑");
}
});
$(".deleteAlink").click(function () {
/*将文字“保存”变为“编辑”*/
var txt = $(‘#editALink‘).text();
if (txt = "保存") {
$("#editALink").text("编辑");
};
/*编辑框、单选按钮隐藏*/
var txtInput = $(this).parent().parent().find(‘td:eq(2)‘).find(‘input:.tr2InputText‘).val();
var valueRadioButton = $(this).parent().parent().find(‘td:eq(3)‘).find(‘input:.tr3RadioButton‘).val();
$(this).parent().parent().find(‘td:eq(2)‘).text(txtInput);
$(this).parent().parent().find(‘td:eq(3)‘).text(valueRadioButton);
});
/******************编辑出现编辑状态，删除取消编辑状态（End）**************************/
《可编辑td》