javascript - 从 td :first row 获取数据字段

Question

我有一个使用 php 直接从数据库中绘图创建的表。每个td都是可编辑的，当鼠标在其他地方单击时，新数据将发送到数据库并通过.ajax()动态更新。这一切都完美无缺。它通过每个td 的data-fields 来实现这一点。它们与数据库中的字段名称相对应，因此查询具有正确的 WHERE 子句。

现在，我有一个“添加”按钮，可以创建一行新数据，该数据也是可编辑的，并且可以以相同的方式进行编辑和保存。目前我可以添加一行。我正在尝试从 td 第一行创建一个 data-fields 数组，这样我就可以将它们添加到新创建的 td 中在他们的创建循环中。不过，我只能获取第一个和/或第二个 td 的数据字段，而不是我想要的整行。根据我拥有的代码，我怎样才能做到这一点？以我的配置是否可以实现？谢谢。

<script type="text/javascript">  
    /* Add a new table row to the bottom of the table */  
    $(document).ready(function() {  
        $(".add").click(function() {  
            $("#table").each(function() {  
                //create array  

                /* $('.edit_tr:last').find('.edit_td').each(function() {  
                    var fieldArray = [];  
                    fieldArray.push($('.edit_tr:last').find('.edit_td').attr('data-field'));
                }); */     

                var fieldArray = [];  
                // fieldArray.push($('.edit_tr:last').find('.edit_td').last().attr('data-field'));  

                var $table = $(this);  
                // var field = $('.edit_tr').find('td:last').attr('data-field');  

                var id=$('#table tr:last').attr('id');  
                var $tr = $("#table").children('tr');  
                // var $th = $(this).closest('table').find('th').eq($(this).index());  

                // Number of td's in the last table row  
                var n = $('tr:last td', this).length;  
                var tds = '<tr class="edit_tr" id="' + id++ + '">';  

                // array  
                currentDataField = $('.edit_tr:first').find('.edit_td').first().attr('data-field');  
                console.log(currentDataField);  

                for (var i = 0; i < n; i++) {  
                    fieldArray.push(currentDataField);  

                    currentDataField = $('.edit_tr:first').find('.edit_td [data-field=' + currentDataField + ']').next().attr('data-field');  
                    // currentDataField = $('.edit_tr').find('.edit_td').nextAll().attr('data-field');  
                }

                console.log('fieldArray ' + fieldArray);  
                // console.log(field);  

                for (var i = 0; i < n; i++) {  
                    tds += '<td class="edit_td"><input type="text" class="editbox" id="' +  
                    id + '" data-field="' + fieldArray[i] + '"/>&nbsp;</td>';  

                    console.log('fieldArray loop ' + fieldArray[i]);  
                }  
                tds += '</tr>';  

                // console.log(tds);  

                if ($('tbody', this).length > 0) {  
                    $('tbody', this).append(tds);  
                }
                else {  
                    $(this).append(tds);  
                }  
            });  
        });  
    });  
</script> 

用于创建表的 PHP 代码:

public function displayTable($table)
{
    //connect to DB
    $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    echo "<table id='table' border='1'>";   //start an HTML table

    $dbtable = $table;
    $fields =array();
    $result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);

    //fill fields array with fields from table in database
    while ($x = mysqli_fetch_assoc($result))
    {
        $fields[] = $x['Field'];
    }

    $fieldsnum = count($fields);    //number of fields in array

    //create table header from dbtable fields
    foreach ($fields as $f)
    {
        echo "<th>".$f."</th>";
    }

    //create table rows from dbtable rows
    $result = mysqli_query($con, "SELECT * FROM ".$dbtable);

    while ($row = mysqli_fetch_array($result))
    {
        $rowid = $row[$fields[0]];

        echo "<tr class='edit_tr' id='".$rowid."'>";
        foreach ($fields as $f) 
        { 
            echo "<td class='edit_td' data-field='".$f."'><span id='".$rowid."' class='text'>".$row[$f]."</span>
            <input type='text' value='".$row[$f]."' class='editbox' id='".$rowid."' data-field='".$f."'/> </td>"; 
        }
        $rowid++;

        echo "</tr>";
    }

    echo "</table>";    //close the HTML table

    $recordid = $rowid;

    //close connection
    mysqli_close($con);
}

Answer 1

好吧，里面有很多代码(我不是 PHP 用户，所以我必须尽力在一些示例 HTML 上进行测试:D)，所以这就是我认为可以帮助您的内容解决了您在 data-field 值方面遇到的问题，但我就到此为止:

<script type="text/javascript">  
    $(document).ready(function() {  
        /* Add a new table row to the bottom of the table */  
        $(".add").click(function() {
            var fieldArray = [];

            var $table = $("#table");
            var $lastRow = $table.find("tr:last");
            var $dataFields = $lastRow.find("td");

            $dataFields.each(function() {
                fieldArray.push($(this).attr("data-field"));
            });

            . . . .

这应该会得到您的 fieldArray 值，其中填充了最后一个 中所有 td 元素的 data-field 值表的>行。

一些旁注:

• 再说一次，我的 PHP 不太好，但看起来您并不是在表的一行中创建第 th 个值。 。 。它们确实应该包含在 tr 元素中
• 您可以在一行代码中获取 $dataFields 值(实际上有多种方式)，但是像我一样将其分成三行实际上更快(并且更容易阅读，我认为:) )。