Question

我正在处理产品比较表。我想在所有tr中的每个最后一个孩子中添加一个td。我想在表格中以垂直方式显示所有产品。产品比较表使用php。

这是代码：

Warning: call_user_func() expects parameter 1 to be a valid callback, function 'getChildsInMenuCount' not found or invalid function name i

结果如下：

Answer 1

为什么在有更好的选择已经存在的情况下编写自己的表？

使用jQuery @ http://jquery.com/和DataTables @ https://datatables.net/，您可以轻松获得动态列添加功能 - 请查看此小提琴示例：http://jsfiddle.net/4nil/zq7j97c4/10/--

var data_table, row_num, col_num, row_cell, col_cell, iter=0;
var cols = [
    { "mDataProp": "Field1"},
    { "mDataProp": "Field2" },
    { "mDataProp": "Field3" },
    { "mDataProp": "Field4" }
];

var colDef = [{aTargets: [0], sTitle: "Date"},
              {aTargets: [1], sTitle: "Number"},
              {aTargets: [2], sTitle: "FName"},
              {aTargets: [3], sTitle: "LName"},
             ];

//Get stored data from HTML table element
var results = [{
       Field1: "2011/04/23",
       Field2: 8,
       Field3: "Adam",
       Field4: "Den"},
      {
       Field1: "2011/03/25",
       Field2: 6,
       Field3: "Honey",
       Field4: "Singh"}
    ];

function initDT(){
    //Construct the measurement table
    data_table = $('#example').dataTable({
        "bJQueryUI": true,
        //"sPaginationType": "full_numbers",
        //"bProcessing": true,
        "bDeferRender": true,
        "bInfo" : false,
        "bDestroy" : true,
        "bFilter" : false,
        "bPagination" : false,
        "aaData": results,
        "aoColumns": cols,
        "aoColumnDefs": colDef
    });
    attachTableClickEventHandlers();
}

initDT();

function attachTableClickEventHandlers(){
  //row/column indexing is zero based
  $("#example thead tr th").click(function() {     
            col_num = parseInt( $(this).index() );
            console.log("column_num ="+ col_num );   
    });
    $("#example tbody tr td").click(function() {     
            col_cell = parseInt( $(this).index() );
            row_cell = parseInt( $(this).parent().index() );    
            console.log("Row_num =" + row_cell + "  ,  column_num ="+ col_cell );
    });  
};

$("#btnAddRow").click(function(){
    //adding/removing row from datatable datasource
    var record = {
       "Field1": "2011/04/23",
       "Field2": '8',
        "Field3": "tom",
        "Field4": "jerry"};
    data_table.fnDestroy();
    results.push(record);
    //results.pop();
    initDT();  
    $('#example').dataTable().makeEditable({
            sUpdateURL: function(value, settings) {
                               console.log(value);
    }});
});

$('#btnAddCol').click(function () {
        var oSettings = data_table.fnSettings();
        $("#example thead tr th").eq(col_num).after('<th></th>');
        cols.push( {"mDataProp": "Field5"} );
        colDef.push({aTargets: [4], sTitle: "Message"});
        results[0].Field5 = "Msg1";
        results[1].Field5 = "Msg2";
        data_table.fnDestroy();
        data_table.oApi._fnAddColumn(oSettings,null);
        initDT();
});

修改

如果您的内容是静态的，那么有很多“比较表”示例，使用此处的Bootstrap：https://bootsnipp.com/tags/table

php产品比较表

1 个答案: