Как редактировать или удалять данные таблицы базы данных с веб-страницы - PullRequest
Новая
       0

Как редактировать или удалять данные таблицы базы данных с веб-страницы

0 голосов
/ 22 сентября 2018

Привет, у меня есть функция jjery ajax, которая отображает данные таблицы, как показано на рисунке, я хочу добавить поле с надписью edit и delete, которое дает пользователю право редактировать или удалять данные таблицы, и это будет отражено вбаза данных.Пожалуйста, обратите внимание, что я не дал никакого значения индекса в данных ответа, ни у идентификатора нет никакого способа достичь этого!Если это так, не могли бы вы объяснить или показать мне ссылки!спасибо!

enter image description here

	$("#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);

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Вы можете сделать это простым способом, например добавить число в строку и отредактировать строку, используя номер строки.Вот код, который я пробовал, и надеюсь, что он вам поможет.

как см. Фрагмент кода здесь 

<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 есть строка1, когда вы добавляете новыйrow создается новый tr с идентификатором rowX 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>
0 голосов
/ 22 сентября 2018

Это сложно, и на это нельзя ответить несколькими строками кода.

Вы можете перезапустить с нуля, посмотрев на этот старый CRUD: http://jtable.org/

Или угловой x-редактируемый (с помощью начальной загрузки): https://vitalets.github.io/angular-xeditable/#editable-row

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...