JavaScript set all column checkboxes in table with +200 rows, but only visible rows on screen are available

I need to add toggle buttons for un- and checking checkboxes to a page with a table which is delivered by another system. The table can have more then 200+ rows.

The problem I'm currently facing is, that I can only set the checked properties of the checkbox that are currently visible on the screen. So when I try to use document.getElementById for a checkbox which is not on my screen, I got as return value undefined.

Is there a way to load the full content of the table to DOM and not if you scroll to that section in the table?

Update: Sorry for the missing information.

I need to customize a wizard which is rendering a JCA table on the page. I don't have any chance to modify the table itself before generation. Therefore, I need to a script to toggle the checkboxes within the table with a button. The table contains of a few columns with checkboxes. This is the script I'm currently using:

var checkbox = document.getElementById(checkboxId);

  if (checkbox != undefined) {

    if (!checkbox.disabled) {

        checkbox.checked = true;

        checkbox.dispatchEvent(new Event("change" {bubbles: true}));

    }

 }

I know the syntax of the checkboxIds, but when I try to get with document.getElementById(checkboxId) the checkbox, then I only get the ones which are visible on the screen. So I can't do the toggle for all checkbox elements in the table.

I'm pretty new in JavaScript, so I don't know what information to provide :)

Update: This is how it looks like in the debugger

<div class="x-grid3-row  x-grid3-row-selected" style="width: 1833.71px; height: 22px;"> <!-- WORKING FINE -->

<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width: 1833.71px; height: 22px;">

<tbody>

<tr>

<td class="x-grid3-col x-grid3-cell x-grid3-td-column1" style="width:40.19444444444444px;" tabindex="-1">

<div class="x-grid3-cell-inner x-grid3-col-column1">

<input id="SomeID_checkbox_column1" type="checkbox" name="someName" disabled="" ext:qtip="demo">&nbsp;</div>

</td>

</tr>

</tbody>

</table>

</div>



<div class="x-grid3-row   " style="width: 1833.71px; height: 22px;"></div> <!-- PROBLEM: DIV is not possible to expand and get the checkbox unless the checkbox is visible on screen -->

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

well if it is lazy loading/paging than we have no clue what it is because we do not know what code you are using.
– epascarello
Nov 19 '18 at 17:32

You should provide more details about environment/stack you using
– Nosyara
Nov 19 '18 at 17:37

Couldn't you keep a local variable that is selectAll: true (or something similar), and if the checkbox for selectAll is true, you handle that on the server? No need to GET all data if the toggle all checkbox is selected.
– dward
Nov 19 '18 at 18:36

It is also possible to toggle just some selected rows and additionally users should be able to see the checked checkboxes in case of scrolling on the table
– padivani
Nov 19 '18 at 18:41

add a comment |

I need to add toggle buttons for un- and checking checkboxes to a page with a table which is delivered by another system. The table can have more then 200+ rows.

Is there a way to load the full content of the table to DOM and not if you scroll to that section in the table?

Update: Sorry for the missing information.

var checkbox = document.getElementById(checkboxId);

  if (checkbox != undefined) {

    if (!checkbox.disabled) {

        checkbox.checked = true;

        checkbox.dispatchEvent(new Event("change" {bubbles: true}));

    }

 }

I'm pretty new in JavaScript, so I don't know what information to provide :)

Update: This is how it looks like in the debugger

<div class="x-grid3-row  x-grid3-row-selected" style="width: 1833.71px; height: 22px;"> <!-- WORKING FINE -->

<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width: 1833.71px; height: 22px;">

<tbody>

<tr>

<td class="x-grid3-col x-grid3-cell x-grid3-td-column1" style="width:40.19444444444444px;" tabindex="-1">

<div class="x-grid3-cell-inner x-grid3-col-column1">

<input id="SomeID_checkbox_column1" type="checkbox" name="someName" disabled="" ext:qtip="demo">&nbsp;</div>

</td>

</tr>

</tbody>

</table>

</div>



<div class="x-grid3-row   " style="width: 1833.71px; height: 22px;"></div> <!-- PROBLEM: DIV is not possible to expand and get the checkbox unless the checkbox is visible on screen -->

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

well if it is lazy loading/paging than we have no clue what it is because we do not know what code you are using.
– epascarello
Nov 19 '18 at 17:32

You should provide more details about environment/stack you using
– Nosyara
Nov 19 '18 at 17:37

Couldn't you keep a local variable that is selectAll: true (or something similar), and if the checkbox for selectAll is true, you handle that on the server? No need to GET all data if the toggle all checkbox is selected.
– dward
Nov 19 '18 at 18:36

It is also possible to toggle just some selected rows and additionally users should be able to see the checked checkboxes in case of scrolling on the table
– padivani
Nov 19 '18 at 18:41

add a comment |

I need to add toggle buttons for un- and checking checkboxes to a page with a table which is delivered by another system. The table can have more then 200+ rows.

Is there a way to load the full content of the table to DOM and not if you scroll to that section in the table?

Update: Sorry for the missing information.

var checkbox = document.getElementById(checkboxId);

  if (checkbox != undefined) {

    if (!checkbox.disabled) {

        checkbox.checked = true;

        checkbox.dispatchEvent(new Event("change" {bubbles: true}));

    }

 }

I'm pretty new in JavaScript, so I don't know what information to provide :)

Update: This is how it looks like in the debugger

<div class="x-grid3-row  x-grid3-row-selected" style="width: 1833.71px; height: 22px;"> <!-- WORKING FINE -->

<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width: 1833.71px; height: 22px;">

<tbody>

<tr>

<td class="x-grid3-col x-grid3-cell x-grid3-td-column1" style="width:40.19444444444444px;" tabindex="-1">

<div class="x-grid3-cell-inner x-grid3-col-column1">

<input id="SomeID_checkbox_column1" type="checkbox" name="someName" disabled="" ext:qtip="demo">&nbsp;</div>

</td>

</tr>

</tbody>

</table>

</div>



<div class="x-grid3-row   " style="width: 1833.71px; height: 22px;"></div> <!-- PROBLEM: DIV is not possible to expand and get the checkbox unless the checkbox is visible on screen -->

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

I need to add toggle buttons for un- and checking checkboxes to a page with a table which is delivered by another system. The table can have more then 200+ rows.

Is there a way to load the full content of the table to DOM and not if you scroll to that section in the table?

Update: Sorry for the missing information.

var checkbox = document.getElementById(checkboxId);

  if (checkbox != undefined) {

    if (!checkbox.disabled) {

        checkbox.checked = true;

        checkbox.dispatchEvent(new Event("change" {bubbles: true}));

    }

 }

I'm pretty new in JavaScript, so I don't know what information to provide :)

Update: This is how it looks like in the debugger

<div class="x-grid3-row  x-grid3-row-selected" style="width: 1833.71px; height: 22px;"> <!-- WORKING FINE -->

<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width: 1833.71px; height: 22px;">

<tbody>

<tr>

<td class="x-grid3-col x-grid3-cell x-grid3-td-column1" style="width:40.19444444444444px;" tabindex="-1">

<div class="x-grid3-cell-inner x-grid3-col-column1">

<input id="SomeID_checkbox_column1" type="checkbox" name="someName" disabled="" ext:qtip="demo">&nbsp;</div>

</td>

</tr>

</tbody>

</table>

</div>



<div class="x-grid3-row   " style="width: 1833.71px; height: 22px;"></div> <!-- PROBLEM: DIV is not possible to expand and get the checkbox unless the checkbox is visible on screen -->

javascript html dom

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

edited Nov 20 '18 at 12:13

asked Nov 19 '18 at 17:27

padivani

asked Nov 19 '18 at 17:27

padivani

asked Nov 19 '18 at 17:27

padivani

well if it is lazy loading/paging than we have no clue what it is because we do not know what code you are using.
– epascarello
Nov 19 '18 at 17:32

You should provide more details about environment/stack you using
– Nosyara
Nov 19 '18 at 17:37

Couldn't you keep a local variable that is selectAll: true (or something similar), and if the checkbox for selectAll is true, you handle that on the server? No need to GET all data if the toggle all checkbox is selected.
– dward
Nov 19 '18 at 18:36

It is also possible to toggle just some selected rows and additionally users should be able to see the checked checkboxes in case of scrolling on the table
– padivani
Nov 19 '18 at 18:41

add a comment |

well if it is lazy loading/paging than we have no clue what it is because we do not know what code you are using.
– epascarello
Nov 19 '18 at 17:32

You should provide more details about environment/stack you using
– Nosyara
Nov 19 '18 at 17:37

Couldn't you keep a local variable that is selectAll: true (or something similar), and if the checkbox for selectAll is true, you handle that on the server? No need to GET all data if the toggle all checkbox is selected.
– dward
Nov 19 '18 at 18:36

It is also possible to toggle just some selected rows and additionally users should be able to see the checked checkboxes in case of scrolling on the table
– padivani
Nov 19 '18 at 18:41

well if it is lazy loading/paging than we have no clue what it is because we do not know what code you are using.
– epascarello
Nov 19 '18 at 17:32

You should provide more details about environment/stack you using
– Nosyara
Nov 19 '18 at 17:37

Couldn't you keep a local variable that is selectAll: true (or something similar), and if the checkbox for selectAll is true, you handle that on the server? No need to GET all data if the toggle all checkbox is selected.
– dward
Nov 19 '18 at 18:36

It is also possible to toggle just some selected rows and additionally users should be able to see the checked checkboxes in case of scrolling on the table
– padivani
Nov 19 '18 at 18:41

add a comment |

1 Answer
1

active

oldest

votes

Have you tried to getElementsByTagName('input') if all the input html tags are checkbox you could try to get them by Tag insead of ID or Class, I don't know if it will work but you could try...

Also you could try to do the same with JQuery var checkBoxs = $('input') then disable the checkboxs iterating over the array.

answered Nov 19 '18 at 18:42

David Bros

205

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379808%2fjavascript-set-all-column-checkboxes-in-table-with-200-rows-but-only-visible-r%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Have you tried to getElementsByTagName('input') if all the input html tags are checkbox you could try to get them by Tag insead of ID or Class, I don't know if it will work but you could try...

Also you could try to do the same with JQuery var checkBoxs = $('input') then disable the checkboxs iterating over the array.

answered Nov 19 '18 at 18:42

David Bros

205

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

add a comment |

Have you tried to getElementsByTagName('input') if all the input html tags are checkbox you could try to get them by Tag insead of ID or Class, I don't know if it will work but you could try...

Also you could try to do the same with JQuery var checkBoxs = $('input') then disable the checkboxs iterating over the array.

answered Nov 19 '18 at 18:42

David Bros

205

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

add a comment |

Have you tried to getElementsByTagName('input') if all the input html tags are checkbox you could try to get them by Tag insead of ID or Class, I don't know if it will work but you could try...

Also you could try to do the same with JQuery var checkBoxs = $('input') then disable the checkboxs iterating over the array.

answered Nov 19 '18 at 18:42

David Bros

205

Have you tried to getElementsByTagName('input') if all the input html tags are checkbox you could try to get them by Tag insead of ID or Class, I don't know if it will work but you could try...

Also you could try to do the same with JQuery var checkBoxs = $('input') then disable the checkboxs iterating over the array.

answered Nov 19 '18 at 18:42

David Bros

205

answered Nov 19 '18 at 18:42

David Bros

205

answered Nov 19 '18 at 18:42

David Bros

205

answered Nov 19 '18 at 18:42

David Bros

205

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

add a comment |

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

This is unfortunately not working, the problem is that I only get the checkboxes which are visible on the browser screen. All other checkboxes are in DIVs, so I don't get them. See above I updated the question
– padivani
Nov 20 '18 at 10:18

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu