Question

我有一张桌子，每一行都有一个突出显示的选项。该表是从mysql数据动态生成的。当前，当用户从下拉菜单中选择一种颜色时，该行的颜色会更改。每行都有自己的下拉菜单。我的问题是，如何将该CSS信息存储在数据库中，以便下次用户访问该站点时，该表已突出显示？这是我使用下拉菜单更改表行颜色的代码

<script>
    $(document).ready(function () {
        $(document).on('click', 'tr', function () {
            var color = ['none', 'green', 'yellow', 'red'];
            $('select').change(function() {
                $(this).parents('tr').css('background', color[$(':selected', this).index()]);
            });
        });
    });
    </script>

表行是使用ajax请求动态生成的。我知道可以轻松地使文本动态化和更新，但是我试图找到一种方法来修改可以存储信息的php或css表。我不确定所选行在这里如何更改，并且每一行都有自己的下拉菜单。

这是我用于生成每个表行的代码。

$(document).ready(function($)
{    
    function create_html_table (tbl_data)
    {

        //--->create data table > start
        var tbl = '';
        tbl +='<table>'

            //--->create table header > start
            tbl +='<thead>';
                tbl +='<tr>';
                tbl +='<th></th>';
                tbl +='<th></th>';
                tbl +='<th></th>';
                tbl +='<th></th>';

                tbl +='</tr>';
            tbl +='</thead>';



            tbl +='<tbody>';

                $.each(tbl_data, function(index, val) 
                {
                    var row_id = val['row_id'];

                    tbl +='<tr row_id="'+row_id+'">';
                        tbl +='<td><select name="Select1"><option></option><option>Red</option><option>Yellow</option><option>Green</option></select></td>'
                        tbl +='<td ><div>'+val['']+'</div></td>';
                        tbl +='<td ><div>'+val['']+'</div></td>';
                        tbl +='<td ><div>'+val['']+'</div></td>';



            tbl +='</tbody>';

        tbl +='</table>';


        //out put table data
        $(document).find('.tbl_user_data').html(tbl);



    }


    var ajax_url = "<?php echo APPURL;?>/ajax.php" ;
    var ajax_data = <?php echo json_encode($q1);?>;

    //create table on page load
    //create_html_table(ajax_data);

    //--->create table via ajax call > start
    $.getJSON(ajax_url,{call_type:'get'},function(data) 
    {
        create_html_table(data);
    });
    //--->create table via ajax call > end

Answer 1

只是让您开始。代码可能包含错误。第1部分SQL添加新列

//SQL CREATE A COLUMN DEFAULT COLOR
//REPLACE MYTABLE with your table name
//REPLACE DBNAME with your databasename
//REPALCE default_color with your favourite column name
//YOU can also use uuid on your rows as unique key
//EXECUTE THIS SQL

ALTER TABLE `mytable` ADD COLUMN `default_color` VARCHAR(65) NULL DEFAULT NULL;

第2部分：JAVASCRIPT匿名功能

var dy_tb_cr;

(function(){

    'use strict';
    var DYNAMIC_TABLE = function(){
        dy_tb_cr = this;
    };


    DYNAMIC_TABLE.prototype.change = function( row_id, color ){
        var data = 'color='+encodeURIComponent(color);
            data += '&row_id=' encodeURIComponent(row_id);

            this.xhr(data);
    };

    DYNAMIC_TABLE.prototype.xhr = function(data){
        var url = 'update_row_color.php';
        var xhr = new XMLHTTPRequest();
        xhr.open( 'POST', url, true );
        xhr.setRequestHeader( 'content-type', 'application/www-formdata-urlencoded' );
        xhr.send();

    };

    new DYNAMIC_TABLE;

}());


//JS Usage Example
dy_tb_cr.change( 12, 'yellow' );

第3部分：PHP

//change_color.php
//Will

// get from post form



$row = filter_input( INPUT_POST, 'row_id' );
$color = filter_input( INPUT_POST, 'color' );

//PHP PART, HAS TO BE AN FILE
//SQL
//USING PDO ( MY FAVOURITE )
//YOU CAN USE YOUR FAVOURITE METHOD TO CHANGE
// UPDATE `MYTABLE` SET `default_color` = :color WHERE `id` = :id
$dsn = 'Mysql:host=127.0.0.1; port=3306; dbname = MYTABLE';

$sql = 'UPDATE `MYTABLE` SET `default_color` = :color WHERE `id` = :id';
$values = array( ':color' => $color, ':iid' => $row );
$pdo = new PDO( $dsn, $usr, $name );
$statement = $pdo->prepare( $sql );
$statement->execute( $values );

高亮显示基于用户高亮显示的mysql动态生成的表并永久存储信息

1 个答案: