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

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

<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（表单控件）。

我希望这能为您解答问题！

Answer 2

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

你在这里做的事情是使用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>

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

2 个答案: