Jquery selecting dynamically declared html table

Question

I have a function that suppose to add a row to a table depending on screen resolution. The problem is that I do not know how to adapt this part $("tblPotrawy > tbody td").... in order to modify appropriate table. I tried $("tblPotrawy..., $("#tblPotrawy... and none of these work.

Can you please advice how can this be used?

function potrawyEdycjaInfo(nazwaPotrawy){
        
        if ($(document).width() < 1400) {
            var tblPotrawy = $("#tblPotrawy1280");
        }
        else {
            var tblPotrawy = $("#tblPotrawy1920"); 
        }

        $("tblPotrawy > tbody td").each(function(i, el) {
            if ($(el).text() === nazwaPotrawy) {
                $(el).parent().after('<tr id="edycjaInfo"><td>test</td></tr>');
            }
        });
    
    }

`tblPotrawy` is a jQuery object that has one element - the table. So... -> `tablePotrawy.find(...).each(...)` — Andreas, Mar 18 '22 at 08:28
Alternatively, `var tblPotrawy = "tblPotrawy1280"` then `$("#" + tblPotrawy + " > tbody...` (or string literal of course) — freedomn-m, Mar 18 '22 at 09:20

score 0 · Answer 1 · answered Mar 18 '22 at 08:31

if you want to change the style ( css ) depend on resolution , best way is to use media query :

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

link : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Jquery selecting dynamically declared html table

1 Answers1