Question

嗨，我有一个ajax jquery函数，该函数显示表数据，如图所示，我想添加一个字段，指出编辑和删除，该字段使用户可以编辑或删除表数据，并且它将反映在数据库。请注意，我没有为响应数据提供任何索引值或ID 有什么办法可以做到这一点！如果可以的话，请您解释或给我看看参考！谢谢！

	$("#table").append("<tr class='tr'> <td> <input type='checkbox',  value='" + response.data[i].electrician_email + "'>"+response.data[i].electrician_name+" </td> <td> "+response.data[i].electrician_contact+" </td> <td> "+response.data[i].electrician_license+" </td> <td> "+response.data[i].electrician_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);

Answer 1

这很复杂，无法用几行代码来回答。

您可以通过查看以下旧的CRUD重新开始：http://jtable.org/

或角度x可编辑（使用引导程序）： https://vitalets.github.io/angular-xeditable/#editable-row

Answer 2

您可以通过简单的方式进行操作，例如在行中添加数字并使用行号编辑行。这是我尝试过的代码，希望对您有所帮助。

喜欢在此处查看代码段

<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>

tr的ID为row1，当您添加新行时，将创建一个ID为rowX的新tr X是一个数字。如果要编辑该行，请使用rowX选择该行，然后编辑或删除所需的任何内容。

function edit_row(no)
{
 document.getElementById("edit_button"+no).style.display="none";
 document.getElementById("save_button"+no).style.display="block";
	
 var name=document.getElementById("name_row"+no);
 var country=document.getElementById("country_row"+no);
 var age=document.getElementById("age_row"+no);
	
 var name_data=name.innerHTML;
 var country_data=country.innerHTML;
 var age_data=age.innerHTML;
	
 name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
 country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
 age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}

function save_row(no)
{
 var name_val=document.getElementById("name_text"+no).value;
 var country_val=document.getElementById("country_text"+no).value;
 var age_val=document.getElementById("age_text"+no).value;

 document.getElementById("name_row"+no).innerHTML=name_val;
 document.getElementById("country_row"+no).innerHTML=country_val;
 document.getElementById("age_row"+no).innerHTML=age_val;

 document.getElementById("edit_button"+no).style.display="block";
 document.getElementById("save_button"+no).style.display="none";
}

function delete_row(no)
{
 document.getElementById("row"+no+"").outerHTML="";
}

function add_row()
{
 var new_name=document.getElementById("new_name").value;
 var new_country=document.getElementById("new_country").value;
 var new_age=document.getElementById("new_age").value;
	
 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_name").value="";
 document.getElementById("new_country").value="";
 document.getElementById("new_age").value="";
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>

<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>

<tr id="row2">
<td id="name_row2">YYY</td>
<td id="country_row2">Australia</td>
<td id="age_row2">78</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>

<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>

</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

如何从网页编辑或删除数据库的表数据

2 个答案: