如何通过jquery将输入文本框更改为表td

Question

我正在向 jquery 的现有表中添加一个新行。新行由输入框组成，用于从用户输入输出。用户输入后，在按钮上单击我需要使这些文本框像前几行一样显示为表格的 td 元素？如何将文本框转换为表格的 td 元素。有人可以帮我解决这个问题吗？

HTML：

<table class="table table-hover" id="cust-table">
    <thead>
        <tr>
            <th>LastName</th>
            <th>FirstName</th>
        </tr>
    </thead>
    <tbody>
        <?php
            for($i=0; $i<$numrows; ++$i) {
                 $contacts = mysqli_fetch_assoc($result);
            ?>
        <tr>
            <td><?php echo $contacts['LastName']; ?></td>
            <td><?php echo $contacts['FirstName']; ?></td>
        </tr>
        <?php
        } ?>
    </tbody>
</table>

我的 jquery 代码：

function handleAdd (e) {
    var row = $(this).parent().parent().parent().parent();
    var form = '\
                            <tr>\
                                <td><input class="form-control"/></td>\
                                <td><input class="form-control"/></td>\
                                <td class="actions">\
                                    <button class="btn btn-success btn-save-new"><i class="glyphicon glyphicon-ok"></i></button>\
                                    <input type="hidden" id="SlNo" value=" ">\
                                </td>\
                            </tr>' ;
    $('#cust-table tr:last').after(form);

    $('.btn-save-new').click(function(){
        var last_name = $($(this).parent().parent().children()[0]).children().val();
        var first_name = $($(this).parent().parent().children()[0]).children().val(); 

        //how to convert the textbox to table elements??   

     });


}

Answer 1

要更新表，最简单的方法是删除表行并重新创建它们。

您在这里所做的事情是使用 jQuery，但我建议您看一下 AngularJS 之类的东西，因为这样更容易使 DOM 和数据库同步。

特别是看看 ngResource 服务。 Angular 也只刷新更改的行，而不是所有内容。 （例如，看看todoMVC 应用程序）。

无论如何，请在下面找到 jQuery 代码的演示。 （同样的代码也在这里jsFiddle。）

$(function () {
    
    var $tbody = $('#cust-table tbody');
    // dummy data for fill of table --> no php here
    var names = [{
        'firstName': 'John',
            'lastName': 'Doe'
    }, {
        'firstName': 'Susan',
            'lastName': 'Doe'
    }];

    var appendRow = function (first, last) {
        var $first = $('<td/>').html(first);
        var $last = $('<td/>').html(last);
        var $row = $('<tr/>').append($last, $first);
        $tbody.append($row);
    };
    
    var createList = function() {
        $.each(names, function (index, name) {
            appendRow(name.firstName, name.lastName);
        });
    };
    
    createList(); // create list for the first time

    appendRow('<input class="form-control first" type="text" placeholder="first name"/>' +
        '<button id="addName">Add</button>\n',
        '<input class="form-control last" type="text" placeholder="last name"/>');

    $('#addName').click(function (e) {
        var first = $('.form-control.first').val(),
            last = $('.form-control.last').val();
        
        names.push({'firstName': first, 'lastName': last});
        
        //addHandler(first, last);
        changeInputToText($(e.target).closest('tr'), first, last);
        updateDB();
    });
    
    var updateDB = function() {
        //doajax and post names array // not coded here it should also update names if db changed
        refreshTable();
    }
    
    var refreshTable = function() {
       $tbody.empty(); // clear table
       createList();
    };

    var changeInputToText = function ($el, first, last) {
        if (first == "" || last == "") return; // only not empty
        
        var $childs = $el.children(); // 0 = last name, 1 = first name input
        $($childs[0]).text(last);     // replace content with text
        $($childs[1]).text(first);
    };
    /* // not what's requested
    var addHandler = function(first, last) {
        appendRow(first, last);
    };*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="cust-table">
    <thead>
        <tr>
            <th>LastName</th>
            <th>FirstName</th>
        </tr>
    </thead>
    <tbody>
        <!-- commented php because not available here -->
        <!--<?php for($i=0; $i<$numrows; ++$i) { $contacts=m ysqli_fetch_assoc($result); ?>-->
        <!--<tr>
            <td>
                <?php echo $contacts[ 'LastName']; ?>
            </td>
            <td>
                <?php echo $contacts[ 'FirstName']; ?>
            </td>
        </tr>-->
        <!--<?php } ?>-->
    </tbody>
</table>

Answer 2

我要做的第一件事就是让你的生活变得更简单。我建议将添加表单更改为如下所示：

<tr>
  <td class='lastName'><input class="form-control lastNameInput"/></td>
  <td class='firstName'><input class="form-control firstNameInput"/></td>

添加这些类后，您可以简化获取输入值的逻辑。像这样：

var last_name = $('.lastNameInput').val();
var first_name = $('.firstNameInput').val();

接下来，如果您想使用表单值更新数据库，现在是您应该这样做的时候了。如果你这样做并刷新页面，你的问题就解决了。如果出于某种原因，您不想更新数据库，则可以这样做以删除表单并替换为名称：

$('.lastName').innerHtml = last_name;
$('.firstName').innerHtml = first_name;

这将用名字和姓氏的原始文本替换内部 HTML（即表单控件）。

我希望这能回答你的问题！