descripción general
Hoy quiero escribir una interfaz para que los administradores manejen usuarios, mostrando todos los datos en la base de datos con tablas. Luego puedes editar los datos de esa línea a través del botón editar, y puedes guardarlo, no sé si no lo he hecho, es demasiado molesto.
problemas encontrados
En primer lugar, uso javascript, código innerHTML, y reemplazo el código en el medio de la fila de tablas, para que los datos se puedan modificar, pero el botón de edición debe cambiarse para confirmar y cancelar los botones. js código fue escrito de la siguiente
manera
function edit(data){
var str=data.parentNode.parentNode; //“编辑”框的祖父元素
str.cells[1].innerHTML="<input type='text' value='"+str.cells[1].innerText+"'/>"; //第二列，第三列，第七列变为输入框
str.cells[2].innerHTML="<input type='text' value='"+str.cells[2].innerText+"'/>";
str.cells[3].innerHTML="<input type='text' value='"+str.cells[3].innerText+"'/>";
str.cells[6].innerHTML="<input type='text' value='"+str.cells[6].innerText+"'/>";
str.cells[7].innerHTML="<input type='button' οnclick='save(this);' value='保存'/><input type='button' οnclick='resert();' value='取消'/>";
//上面这行作用是将编辑按钮改成保存和取消按钮
}
No hay problema con el cambio de la última línea, pero el evento de clic es inútil, incluso si encuentro un método en línea para cambiar el código anterior a:
"<input type='button' onclick="save(this)" value ='guardar'/><tipo de entrada ='botón' οnclick='resert();' value='Cancelar'/>"
o incluso directamente:
"<tipo de entrada='botón' οnclick="alert("¡hola!" )" value='save'/ ><input type='button' οnclick='resert();' value='cancel'/>" No importa
cómo haga clic, no hay respuesta
problema resuelto
Encontré un artículo más tarde, el enlace es el siguiente: Enlace
: https://blog.csdn.net/qq_28883885/article/details/70767629 .
Cambie el código de la siguiente manera:
//使用的是jquery
$(function(){
//编辑按钮点击修改监听事件 功能是将数据上传到后台去
$("input:button").click(function(){
//jquery中选择器就是这么写的，不懂可以搜选择器三个字，去了解了解
if($(this).val()=="确认"){
//val(),将input中value的值取出来，例如框的话，就是框中数据 这句话意思就是您点击了确认按钮，就会开始下列的ajax请求
$.ajax({
//这是jquery下的ajax格式
type:"post", //传输类型 还可以为get
url:"adminfun_action_update.action",
//前后端连接使用的是struts2 因此url直接填写action name 上的值就行了
data:{
admin_id:$(this).parents("tr").children("#admin_id").children('input').val(),
//当前元素，向上为<tr>的父元素，在找到父元素下的所有特定id的孩子元素，在这些孩子元素中，找出其中有input的孙子元素，将其上的value传给json格式的对象
admin_name:$(this).parents("tr").children("#admin_name").children('input').val(),
admin_password:$(this).parents("tr").children("#admin_password").children('input').val(),
admin_power:$(this).parents("tr").children("#admin_power").children('input').val()
},
dataType:"json",
success:function(res){
if(res!=null)alert("提交成功");
}
});
}
//三目运算符
str=$(this).val()=="编辑"?"确认":"编辑";
$(this).val(str); //点击以后，相互变化
//现在元素也就是$(this)为编辑按钮，parent(),找到其父元素，一般为表格的<td>元素
//然后siblings为<td>元素的兄弟元素，each遍历这些兄弟元素,有些元素不用更改，因此在需要更改的元素上加了id
$(this).parent().siblings("td[id]").each(function(){
var obj_text = $(this).find("input:text");
if(!obj_text.length) // 如果没有文本框，则添加文本框使之可以编辑
$(this).html("<input type='text' value='"+$(this).text().trim()+"'/>");
else
$(this).html(obj_text.val());
})
});
});
Los comentarios del código anterior se detallan, si no lo entiende, puede Baidu.
Lo siguiente es la recepción del código back-end:
//获取到request
HttpServletRequest request = ServletActionContext.getRequest();
//获取前端传来的id选项 name选项 passwd选项 和权限选项
admin_id = Integer.parseInt(request.getParameter("admin_id"));
admin_name = request.getAttribute("admin_name").toString();
admin_password = request.getParameter("admin_password").toString();
admin_power = Integer.parseInt(request.getParameter("admin_power"));
A continuación, conecte algunas imágenes (vea el efecto)
1. Antes de la modificación 
2. Haga clic para editar y especifique cambiar al cuadro de texto de entrada
3. La tabla en mysql antes de la modificación
4. Modificar datos
5. Haga clic para confirmar
6.
Si faltan datos en la tabla de la base de datos , por favor avise, principiantes , guardado como recuerdo, y también para referencia de los que vienen