我有一个问题编辑一排......我想用一个按钮,在表格中输入编辑模式
I've one problem with editing a row... I wanted to use a button to enter edit mode in the table (generated from php array (data taken from mysql))
我有两行,每一个数据:
I have two rows for each data:
<tr class="dataline">
<td><?=$row->id; ?></td>
<td><?=$row->pl>0 ? '<div id="gain">' . $row->pl .'</div>' : '<div id="loss">' . $row->pl . '</div>';?></td>
<td><div id="reason"><?=$row->reason;?></div></td>
<td><div id="comment"><?=$row->comment;?></div></td>
<td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
<td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
<td colspan="2"><button id="editlink">Edit</button>
<button id="deletelink">Delete</button></td>
</tr>
<tr class="editline" style="display:none;">
<form id="<?php echo $row->id;?>">
<td><?php echo $row->id; ?><input type="hidden" name="id" id="id" value="<?php echo $row->id;?>" /></td>
<td><input type="text" id="pl" name="pl" value="<?=$row->pl;?>" /></td>
<td><textarea id="reason" name="reason"><?=$row->reason;?></textarea></td>
<td><textarea id="comment" name="comment"><?=$row->comment;?></textarea></td>
<td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
<td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
<td colspan="2"><input id="edit_save" type="Submit" value="Save" />
</form>
<button id="cancellink">Cancel</button></td>
</tr>
我挂的两个jQuery的语句吧...
I attached two jquery statements to it ...
1日。之一... ...改变行
1st. one ... changes the row to
$("#editlink").click(function() {
var datapos = $(this).parent().parent().prevAll().length;
var editpos = datapos + 1;
$("#data_table tbody tr:eq(" + datapos + ")").hide();
$("#data_table tbody tr:eq(" + editpos + ")").show();
});
完美的作品。
Works perfectly.
2次。假设保存(POST到PHP脚本),一旦更改已经完成,并重新加载页面。
2nd. Suppose to save (POST to PHP script) once the change has been done and reload the page.
$("#edit_save").click(function() {
var dataString = $("form").serialize();
var editpos = $(this).parent().parent().prevAll().length;
var datapos = editpos - 1;
$.ajax({
type: "POST",
url: "edit",
data: dataString,
success: function() {
$("#lightbox").fadeIn(900);
$("#notification-box").show();
$("#notification-box").html("<img src='<?php base_url();?>img/notification.gif'><p>Saving</p>");
location.reload();
}
});
});
所以,这个问题我这里的是,dataString是表不是我想要编辑的特定行生成的所有值的值。
So, the issue I have here is that the dataString is a value of all values generated in the table not the specific row I wanted to edit.
我会很高兴,如果有人能帮助我这一点。
I would be really glad if someone can help me with that.
干杯,
/亚采
$(形式)
将提取所有&LT;形式GT;
在页面中的元素,你需要点击的按钮父窗体: $(本).parent('表')
:
$("form")
would fetch all <form>
elements in the page, you need the clicked button parent form: $(this).parent('form')
:
var dataString = $(this).parent('form').serialize();