使用javascript和json加载表时如何为按钮分配多个值

时间:2017-07-28 11:33:28

标签: javascript html json

在下面的代码中,我使用了一个json数组(pedingPLT)将数据加载到html表下面。这里每个表数据都有一个值。在一个特定的表数据我已经包含一个按钮。所以有可能为按钮分配多个值(*********),我的意思是使用一个数组。请帮助我

   function TSC_document_status_list_table_for_tsc_portal() {
        var tableData;
        $.post("model/tscAdminView.php", {action: 'TSC_document_status_list_table_for_tsc_portal'}, function (e) {
            if (e === undefined || e.length === 0 || e === null) {
                tableData = '<tr class="error"><td colspan="4"> No Data Found in database </td></tr>';
                $('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
            } else {
                $.each(e, function (index, pedingPLT) {
                    index++;
                    tableData += '<tr>';
                    tableData += '<td>' + index + '</td>';
                    tableData += '<td>' + pedingPLT.document_id + '</td>';
                    tableData += '<td>' + pedingPLT.tsc_accepted_Or_Created_date +'</td>';
                    tableData += '<td>' + pedingPLT.total_allocated_days + ' days' + '</td>';
                    tableData += '<td>' + pedingPLT.Expired_date  + '</td>';
                    tableData += '<td> <button class="btn btn-sm btn-alt m-r-5 delete_selected_employee" value="' +  ********  + '"><i class="fa fa-trash-o fa-lg"></i>&nbsp;</button>' + pedingPLT.total_quantity +'</td>';
                    tableData += '<td>' + pedingPLT.Completed_phone_list + '</td>';
                    tableData += '<td>' + pedingPLT.peding_phone_list + '</td>';
                    tableData += '</tr>';
                });
                //Load Json Data to Table
                $('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
            }
        }, "json");
    }

enter image description here

2 个答案:

答案 0 :(得分:0)

按钮的value属性类型为“text”(source),因此无法为其添加多个值。

也就是说,你可以自由地将JSON字符串字符串化为值,并在需要时解析它:

JSON.stringify()

(方法文档:JSON.stringify

答案 1 :(得分:0)

您可以在按钮中使用data-value属性,并将json字符串放在data-value属性中。

     function TSC_document_status_list_table_for_tsc_portal() {
            var tableData;
            $.post("model/tscAdminView.php", {action: 'TSC_document_status_list_table_for_tsc_portal'}, function (e) {
                if (e === undefined || e.length === 0 || e === null) {
                    tableData = '<tr class="error"><td colspan="4"> No Data Found in database </td></tr>';
                    $('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
                } else {
                    $.each(e, function (index, pedingPLT) {


                        var button_data_value = '{"document_id" : pedingPLT.document_id , "total_days" : pedingPLT.total_allocated_days }';


                        index++;
                        tableData += '<tr>';
                        tableData += '<td>' + index + '</td>';
                        tableData += '<td>' + pedingPLT.document_id + '</td>';
                        tableData += '<td>' + pedingPLT.tsc_accepted_Or_Created_date +'</td>';
                        tableData += '<td>' + pedingPLT.total_allocated_days + ' days' + '</td>';
                        tableData += '<td>' + pedingPLT.Expired_date  + '</td>';


                        tableData += '<td> <button class="btn btn-sm btn-alt m-r-5 delete_selected_employee" data-value= "'+JSON.Stringify(button_data_value)+'"><i class="fa fa-trash-o fa-lg"></i>&nbsp;</button>' + pedingPLT.total_quantity +'</td>';



                        tableData += '<td>' + pedingPLT.Completed_phone_list + '</td>';
                        tableData += '<td>' + pedingPLT.peding_phone_list + '</td>';
                        tableData += '</tr>';
                    });
                    //Load Json Data to Table
                    $('#TSC_document_status_list_table_for_tsc_portal tbody').html('').append(tableData);
                }
            }, "json");
        }