将选中的行转换为输入字段

Question

我将数据库中的数据显示到 table 中，每行前面都有复选框。我想要的只是在单击编辑按钮时通过 class 单击进入输入字段来更改选中的行列。我对 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>

Answer 1

我并没有真正使用你的代码，因为你用 php 编写 html 这很难维护并且不是我喜欢的风格（我宁愿写 html 然后把php inside) 但这应该可以帮助你解决你的问题：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);
});

希望对您有所帮助！

Answer 2

基本上你需要两个函数来运行...

单击 "edit" 时：将所有 "editable" 列转换为 INPUT，如果该行是“:checked”
在编辑您的 "editable" 输入之一时按下 ENTER：将其恢复为字符串

为了清楚起见，我稍微简化了您的 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() );
            });          

        }

    });

});

将选中的行转换为输入字段

convert checked rows to input fields

html

php

jquery