Jump to content
Fratozzi

JS convert table to list, but not copy status checkbox

Recommended Posts

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

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.