我将数据库中的数据显示到表格中,每行前面都有一个复选框。我想要的是在单击编辑按钮时将类单击更改选中的行列到输入字段。我是jQuery的新手。我没有太多关于它的概念。请帮助我。
以下是我尝试过的jQuery代码:
$(function () {
$("input[name='check[]']:checked").each(function (){
$('#edit').click(function(){
var OriginalContent = $('.click').text();
$('.click').addClass("cellEditing");
$('.click').html("<input type='text' value='" + OriginalContent + "' />");
$('.click').children().first().focus();
$('.click').children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $('.click').val();
$('.click').parent().text(newContent);
$('.click').parent().removeClass("cellEditing");
}
});
$('.click').children().first().blur(function(){
$('.click').parent().text(OriginalContent);
$('.click').parent().removeClass("cellEditing");
});
});
});
});
这是html:
echo '<div class="table-responsive">';
echo '<table class="table table-bordered table-hover"><thead><tr>
<th>ID</th><th>Name</th><th>Category</th><th>Description</th><th>Price</th><th>Status</th><th colspan="2">Image</th></tr></thead><tbody>';
while($row = mysqli_fetch_array($retval))
{
echo '<tr><td>'.$row["ID"].'</td>
<td >'.$row["Name"].'</td>
<td>'.$row["Category"].'</td>
<td>'.$row["Description"].'</td>
<td class="click1">'.$row["Price"].'</td>
<td class="click">'.$row["Status"].'</td>
<td><img style="width: 3em; heigth: 3em;" class="img-responsive" src="'.$row["Imagepath"].'" alt="'.$row["Name"].'"/></td>
<td><input class="checkbox" name="check[]" id="check[]" type="checkbox" value='.$row["ID"].'/></td></tr>';
}
echo '</tbody></table>';
echo '</div>';
?>
<center><input class="btn btn-default" name="deletebutton" type="submit" value="DELETE" />
<input class="btn btn-default" name="edit" id="edit" type="button" value="EDIT" />
<input class="btn btn-default" name="updatebutton" type="submit" value="UPDATE"/></center>
</form>
答案 0 :(得分:1)
基本上你需要运行两个函数......
为了清晰起见,我简化了HTML。需要jQuery的解释是内联的。
此外,这是一个有效的jsFiddle:http://jsfiddle.net/msz76tgp/2/
<强> HTML 强>
<table>
<tr>
<td class="editable status">something</td>
<td class="editable price">2</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
<tr>
<td class="editable status">something else</td>
<td class="editable price">3</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
</table>
<a id="edit" href="#edit">edit</a>
<强>的jQuery 强>
$(function () {
// When edit is clicked...
$('#edit').on('click', function(){
// For each ":checked" checkbox...
$('.checkbox INPUT:checked').each( function(){
// Get the parent row...
var $row = $(this).closest('tr');
// And that row's "editable" columns...
var $editable= $row.children('.editable');
// Add the "editing" class...
$editable.addClass('editing');
// And change all strings to INPUT fields.
$editable.each( function(){
$(this).html('<input value="'+$(this).text()+'"/>');
});
});
});
// Also...
// Any time an .editing INPUT receives a keypress...
$('table').on('keypress', '.editing', function(e){
// If the key pressed is ENTER...
if( e.which == 13 ){
// Get the current row...
var $row = $(this).closest('tr');
// Get the editable columns...
var $editable = $row.children('.editable');
// Remove the class...
$editable.removeClass('editing');
// Change back to string...
$editable.each( function(){
$(this).html( $(this).find('INPUT').val() );
});
}
});
});
答案 1 :(得分:0)
我没有真正使用你的代码,因为你用PHP编写html很难维护而且不是我的首选风格(id而不是写html然后把php放在里面)但这应该可以帮到你解决你的问题:http://jsfiddle.net/swm53ran/28/。
代码中的注释显示了正在进行的操作。本质上,我使用jquery添加输入与已经存在的数据。但由于你使用的是php,你可以通过在javascript部分内置的html代码中插入<?php echo();?>
来修改下面的代码。
<tr>
<td class="name">php echo name here</td>
<td class="description">php echo description here</td>
<td class="data">php echo data here</td>
<td><a href="#" class="edit btn btn-primary">Edit Info</a></td>
</tr>
$('.edit').on('click', function() {
var row = $(this).closest('tr');
***NOT NECESSARY SECTION OF CODE BECAUSE YOU'RE USING PHP (JUST FOR DEMO)****
//collect data thats there (you dont have to do this if you have php,
//then you can just code in <?php echo();?> into your html building in
//javascript) because i have no php here
var name = row.find('.name').html();
var description = row.find('.description').html();
var data = row.find('.data').html();
***END OF NOT NECESSARY SECTION****
//construct inputs to be inserted into cells
//since you're using php, you modify the below code to something like this:
//var nameInput = '<input type="text" value="<?php echo('name');?>"/>';
//but you have to be careful because ^ this code wont work because of the
//nested parenthesis escape each other, so just put like <?php echo('name');?>
//into another variable and stick the variable in instead.
var nameInput = '<input type="text" value="'+ name +'"/>';
var descriptionInput = '<input type="text" value="'+ description +'"/>';
var dataInput = '<input type="text" value="'+ data +'"/>';
//remove all contents and append inputs
row.find('.name').html('').append(nameInput);
row.find('.description').html('').append(descriptionInput);
row.find('.data').html('').append(dataInput);
});
希望这有帮助!