データベースのすべての行を表示するphpとjqueryを使用してリストを作成します。
このリストに更新ボタンを追加したい。ユーザーが行をクリックすると、行が展開され、ボタンが表示されます。その行のテキストはテキストボックスに入ります。
私の質問は、ユーザーがその行のボタンをクリックしたときにテキストを更新するにはどうすればよいですか? 最初は、すべての行にフォームを配置できると思いました..しかし、それはひどい解決策だと思います。
私がやりたいことの例やソースを教えてもらえますか?
2 に答える
2
コードを尋ねる質問には、試したコードが表示されている必要があります。コードを提供しなかったので、大まかな回答をします。
- ボタンにイベント ハンドラーをアタッチします (または、おそらく実際にはテーブルにアタッチし、委任を使用します)。
- イベント ハンドラーで、jQuery トラバーサル関数を使用して、ボタンが属する行を見つけます。
- 行への参照を取得したら、jQuery トラバーサル関数を使用して行内
inputの を見つけます。 - 値を取得し、ajax を使用してデータベースを更新します。
于 2013-09-18T15:32:07.803 に答える
0
これは本質的にあなたがする必要があることです
jsFiddle (all working except AJAX)
上記の jsFiddle を確認すると、質問の最初の部分がどのように機能するかがわかります。
値は AJAX を介してデータベースで更新され、コード ブロックは jsFiddle の例に存在しますが、jsFiddle は AJAX を示すことができないため、実際の動作を確認することはできません。
ただし、以下を 2 つのファイル (javascript を独自のファイルに分割する場合は 3 つ) にコピー アンド ペーストし、独自のデータベースに一致するように編集すると、実際の動作を確認できます。
次の 2 つのファイルが必要です。
1: index.php (または任意の名前)
2: my_php_processor_file.php (この名前を変更する場合は、javascript の AJAX コード ブロックも変更する必要があります)
HTML:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
//Global var goes here:
editRow = 0;
$(document).ready(function() {
$('#msgbox').dialog({
autoOpen:false,
width:400,
modal:true,
buttons: {
Submit: function() {
var mfn = $('#mfn').val();
var mln = $('#mln').val();
var mem = $('#mem').val();
$('table').find('tr').eq(editRow).find('.fname').val(mfn);
$('table').find('tr').eq(editRow).find('.lname').val(mln);
$('table').find('tr').eq(editRow).find('.email').val(mem);
/*
//Now do the ajax transfer to the server
$.ajax({
type: 'POST',
url: 'my_php_processor_file.php',
data: 'user_id=' +editRow+ '&first_name=' +mfn+ '&last_name=' +mln+ '&email_addy=' +mem,
success:function(recd){
$('#alert').html(recd);
$('#alert').dialog('open');
}
}); //END ajax code block
*/ //Now, close the dialog -- doesn't happen automatically!
$(this).dialog('close');
}, //END Submit button
Cancel: function() {
$(this).dialog('close');
} //END Cancel button
} //END all buttons
}); //END msgbox div (dialog)
$('.editbutt').click(function() {
editRow = $(this).parents('tr').index();
//alert(editRow);
var fn = $(this).parents('tr').find('td').eq(0).find('.fname').val();
var ln = $(this).parents('tr').find('td').eq(1).find('.lname').val();
var em = $(this).parents('tr').find('td').eq(2).find('.email').val();
$('#mfn').val(fn);
$('#mln').val(ln);
$('#mem').val(em);
$('#msgbox').dialog('open');
}); //END editbutt
$('#alert').dialog({
autoOpen:false,
modal:true
});
}); //END document.ready
</script>
</head>
<body>
<table id="tbl">
<tr>
<td>
First Name
</td>
<td>
Last Name
</td>
<td>
Email
</td>
</tr>
<tr>
<td>
<input type="text" class="fname" id="fn1">
</td>
<td>
<input type="text" class="lname" id="ln1">
</td>
<td>
<input type="text" class="email" id="em1">
</td>
<td>
<input class="editbutt" type="button" value="Edit Row">
</td>
</tr>
<tr id="tr2">
<td id="td2a">
<input type="text" class="fname" id="fn2">
</td>
<td id="td2b">
<input type="text" class="lname" id="ln2">
</td>
<td id="td2c">
<input type="text" class="email" id="em2">
</td>
<td id="td2d">
<input class="editbutt" type="button" value="Edit Row">
</td>
</tr>
</table>
<div id="msgbox">
<h2>Edit User</h2>
First Name: <input id="mfn" type="text"><br/>
Last Name : <input id="mln" type="text"><br/>
Email Addy: <input id="mem" type="text"><br/>
</div>
<div id="alert"></div>
</body>
</html>
PHP プロセッサ ファイル: my_php_processor_file.php
<?php
$fn = $_POST['first_name'];
$ln = $_POST['last_name'];
$em = $_POST['email_addy'];
$uid = $_POST['user_id'];
/*
//This is where you use the security features of PHP to strip_slashes, and
//protect html_entities, etc. to guard your database against SQL injection
//attacks, etc. SEE THESE POSTS:
http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php
http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php
http://blogs.msdn.com/b/brian_swan/archive/2010/03/04/what_2700_s-the-right-way-to-avoid-sql-injection-in-php-scripts_3f00_.aspx
*/
//Now, update the database:
$success = mysql_query("UPDATE `users` SET `email`='$em', `first`='$fn', `last`='$ln' WHERE `user_id` = '$uid'");
//Now, return a message or something
if (mysql_affected_rows() == -1) {
$output = '<h2>Sorry, database update failed</h2>';
}else{
$output = '<h2>Update successful</h2>';
}
echo $output;
于 2013-09-18T16:31:31.167 に答える