Jump to content

JS convert table to list, but not copy status checkbox


Fratozzi
 Share

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

 

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

This thread is more than a year old.

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.

 Share

×
×
  • 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.