JS convert table to list, but not copy status checkbox

[Fratozzi]

I have the following code, in practice I have a problem, if i have the checkbox checked it copies the status but does not show it to me checked.

can you please help me?

....

    <table id="table-files" class="uk-table uk-table-responsive uk-table-middle">
        <thead>
            <tr>
                <th class="uk-table-shrink"><input name="checkbox-all-files" type="checkbox" class="uk-checkbox"></th>
                <th id="table-image" class="uk-table-shrink"></th>
                <th id="table-name" class="uk-table-expand">Name</th>
                <th id="table-file" class="uk-table-shrink">File</th>
                <th id="table-folder" class="uk-table-shrink">Folder</th>
                <th id="table-tools">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr class="check-files" data-user="2" data-file="10">
                <td><input name="checkbox-files" value="43" type="checkbox" class="uk-checkbox"></td>
                <td data-image="1"><img alt="User" src="/user/user_profile.jpg" width="60" height="60"></td>
                <td class="uk-text-nowrap">Mark Zu</td>
                <td class="uk-text-nowrap" name="tools-table"><a href="/files/Test.jpg">Test.jpg</a></td>
                <td class="uk-text-nowrap">Main</td>
                <td name="tools-table"></td>
            </tr>
        </tbody>
    </table>

    ....

    <script src="/functions/table-to-ul.js" type="text/javascript"></script>

THE FUNCTION CONVERSION IS ON FILE TABLE-TO-UL.JS

   

 function convert_table_to_list_files(table_id) {
        var list_id = table_id.replace("table-", "ul-");
        var ul = $("<ul id='"+list_id+"' class='uk-grid uk-grid-medium uk-child-width-1-2@s uk-child-width-1-3@l uk-child-width-1-4@xl' uk-grid uk-height-match='target: > div > .uk-card'>");
        $("#"+table_id+" tbody tr").each(function(){
            var classTR = this.className;
            var userTR = this.attributes["data-user"].value;
            var fileTR = this.attributes["data-file"].value;
    
            var li = $("<li class='"+classTR+"' data-user='"+userTR+"' data-file='"+fileTR+"'>");
    
            var checkboxCell = this.children[0].innerHTML;
            var ImgCell = this.children[1].attributes["data-image"].value;
            var userCell = this.children[2].innerHTML;
            var fileCell = this.children[3].innerHTML;
            var fileHrefCell = this.children[3].firstElementChild.firstElementChild.href;
    
            var resultOutput = `<div class="uk-card uk-card-box">
                <div class="uk-card-teaser uk-position-relative">
                    <div class="uk-background-cover" style="background-image: url('`+fileHrefCell+`');">
                    </div>
                <canvas width="1200" height="800"></canvas>
                </div>
                <div class="uk-text-truncate"><div class="uk-flex uk-flex-center uk-flex-middle">`+
                    checkboxCell+`<span>`+fileCell+`</span>`+
                    `</div><hr>`+
                    `<div data-image="`+ImgCell+`">`+userCell+`</div>`
                +`</div>
            </div>`;
    
            li.append(output);
            ul.append(li);
        })
        $("table#"+table_id).replaceWith(ul);
    }

 

[requinix]

43 minutes ago, Fratozzi said:

if i have the checkbox checked it copies the status but does not show it to me checked

Can you try explaining that with a few more words? Exactly what is it supposed to do and what is it currently doing?

[Fratozzi]

2 minutes ago, requinix said:

Can you try explaining that with a few more words? Exactly what is it supposed to do and what is it currently doing?

If I convert from table to list, with a checkbox clicked (checked true) I would like the clicked checkbox to appear in the list, but instead it appears as not clicked if I look at the checkbox status using console.log () it is checked true

[requinix]

The problem is you're copying elements' innerHTML, which does not carry along the current state of the elements. State like whether a checkbox is checked.

Work with everything as DOM elements.  Create your basic list structure and then move the existing elements into it as they are, ie. with jQuery functions like append().

But the best solution would be to write markup that can switch between the two presentation styles on the fly. Ideally you shouldn't have to change the structure of the HTML at all to change how it appears to the user.