how to assign multiple values to a button when loading table using javascript and json

Question

In the below code i have used a json array(pedingPLT) to load data to below html table. here each an every table data has got a single value. in a particular table data i have included an button.so is there any possibility to assign multiple values to the button (*********), i mean by using an array. kindly help me

   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");
    }

Answer 1

The value attribute of button is of type "text" ( source ), so it's not possible to add multiple values to it.

That said, you are free to stringify a JSON-string in it as value, and parse it when you need it:

JSON.stringify()

(method documentation: JSON.stringify )

Answer 2

You can use data-value attribute in the button and put the json string in the data-value attribute.

     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");
        }