HTML table with a loop

ERPNext
1

How to build an HTML table with a loop by using a client-side custom script??

2

Do you want to add rows in child table of any form or anything else?

3

In your script html file, get the values from $data

<table class="table table-bordered">
        <thead>
                <tr>
                        <th style="width: 12%">{%= __("Date") %}</th>
                        <th style="width: 15%">{%= __("Description") %}</th>
                        <th style="width: 25%">{%= __("Reference") %}</th>
                        <th style="width: 15%">{%= __("Debit") %}</th>
                        <th style="width: 15%">{%= __("Credit") %}</th>
                        <th style="width: 18%">{%= __("Balance (Dr - Cr)") %}</th>
                </tr>
        </thead>
        <tbody>
                {% for(var i=0, l=data.length-1; i<l; i++) { %}

                
                        <tr>
                        {% if(data[i].posting_date) { %}
                                <td>{%= frappe.datetime.str_to_user(data[i].posting_date) %}</td>
                                <td>{%= data[i].voucher_type %}</td>
                                <td>{%= data[i].voucher_no %}</td>
                                <td style="text-align: right">
                                        {%= format_currency(data[i].debit, filters.presentation_currency) %}</td>
                                <td style="text-align: right">
                                        {%= format_currency(data[i].credit, filters.presentation_currency) %}
                                </td>
                        {% } else { %}
                                <td></td>
                                <td></td>
                                <td><b>{%= frappe.format(data[i].account, {fieldtype: "Link"}) || "&nbsp;" %}</b></td>
                                <td style="text-align: right">
                                        {%= data[i].account && format_currency(data[i].debit, filters.presentation_currency) %}
                                </td>
                                <td style="text-align: right">
                                        {%= data[i].account && format_currency(data[i].credit, filters.presentation_currency) %}
                                </td>
                        {% } %}
                                <td style="text-align: right">
                                        {%= format_currency(data[i].balance, filters.presentation_currency) %}
                                </td>
                        </tr>
                {% } %}
        </tbody>
</table>
4

Thanks for the reply.but i want to do it by client side custom script.
I got the solution…m sharing my code here…

var competencyLevelWiseKeys = Object.keys(competencyLevelWiseDescription)
competencyHtmlTable = ‘’;

        for (var key in competencyLevelWiseKeys){

            competencyHtmlTable += "<tr>\
                <td>\
                " + competencyLevelWiseKeys[key].toUpperCase() + "\
                </td>\
                <td>\
                " + competencyLevelWiseDescription[competencyLevelWiseKeys[key]] + "\
                </td>\
                </tr>\
                ";                          
        }

let competencyLevelHTML = function() {

    var digital_original_html = 
    "<!doctype html>\
    <html>\
    <head>\
    <meta charset='utf-8'>\
    <meta name='viewport' content='width=device-width, initial-scale=1'>\
    <style>\
    .footprint-info table td {\
        border:none !important;\
    }\
    </style>\
    </head>\
    <body>\
    <div class=''>\
    <br>\
    <h6>\
    All Levels of Chosen Competency\
    </h6>\
    <table class='table borderless' style='font-size:14px; color:#8d99a6'>\
    <tr>\
        <th>\
            LEVEL\
        </th>\
        <th>\
            DESCRIPTION\
        </th>\
    </tr>\
    " + competencyHtmlTable + "\
    </table>\
    </div>\
    </body>\
    </html>\
    ";
        
        $(cur_frm.fields_dict['competency_level_html'].wrapper).html(digital_original_html);
  
}

competencyLevelHTML();

1 Like
5

Hey can you please tell me how to call onclick event on the button in the above HTML format.