0

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

现在，我有一个添加按钮，它可以创建一个新的数据行，该数据行也是可编辑的，并且可以以相同的方式进行编辑和保存。目前我可以添加一行。我正在尝试data-fields从第一行创建一个数组，td这样我就可以td在创建循环期间将它们添加到新创建的数组中。但是，我只能获得data-field第一个和/或第二个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);
}
4

2 回答 2

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，其中填充了最后一个.data-fieldtdrowtable

一些旁注：

  • 再一次，我的 PHP 不是很好，但看起来你不是th在 table 的一行中创建你的值。. . 他们真的应该被包裹在一个tr元素中
  • 您可以$dataFields在一行代码中获取值（实际上有几种方法），但是像我一样将它分成三行实际上更快（并且在我看来更容易阅读:)）。
于 2013-10-02T16:52:38.477 回答
0
  1. 如果通过 jQuery 函数设置数据属性.data()，那么这些属性是隐藏属性，无法从 $('.item [data-...]') 中找到。
  2. 如果您需要将字符串或数字设置为数据属性，则使用.attr('data-NAME', value)函数进行设置
  3. 您可以在不搜索数据属性的情况下找到所有元素，然后使用函数jQuery.map()过滤元素
于 2013-10-01T22:07:41.213 回答