《可编辑td》

标签：style   io   ar   div   cti   sp   html   on   c   

    /******************编辑出现编辑框，删除恢复原始状态（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=‘是‘/>是 &nbsp&nbsp &nbsp &nbsp <input type=‘radio‘  name=‘ifCompute‘ value=‘否‘/>否</div>");            

/*添加选中边框*/            

$(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》

标签：style   io   ar   div   cti   sp   html   on   c   

原文地址：http://www.cnblogs.com/beesky520/p/3962408.html