0

データベースから直接php描画を使用して作成されるテーブルがあります。それぞれtdが編集可能で、マウスが別の場所でクリックされると、新しいデータがデータベースに送信され、 を通じて動的に更新されます.ajax()。それはすべて完璧に機能します。これはdata-fields、各 のを通じて行われますtd。これらはデータベースのフィールド名に対応しているため、クエリには適切な WHERE 句が含まれます。

これで、編集可能で、同じ方法で編集および保存できるデータの新しい行を作成する ADD ボタンがあります。現在、行を追加できます。data-fields最初の行からの配列を作成しようとしているので、それらを作成ループ中にtd新しく作成されたものに追加できます。私が意図しているように、行全体ではなく、最初のおよび/または2番目のtdのみを取得できます。私が持っているコードを考えると、どうすればそれを行うことができますか? 私が持っている構成でも可能ですか？ありがとう。data-fieldtd

<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

いくつかの補足事項:

  • th繰り返しますが、私の PHP は良くありませんが、 table の行内に値を作成しているようには見えません。. . trそれらは実際には要素にラップする必要があります
  • 1行のコードで値を取得できますが$dataFields（実際にはいくつかの方法があります）、私が行ったように3行に分割する方が実際には高速です（私の意見では、少し読みやすくなります:)）。
于 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 に答える