I am curious whether there is an easy way in jquery (or javascript) to check whether there is a visible character inside a div or td element.

Example:

Let's say I have a table with a header and a row below as filters as follows:

<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        ....
    </tr>
    <tr>
        <th><input id="FirstNameFilter" /></th>
        <th>
            <select id="LastNameFilter">
                <option value="Smith">Smith</option>
                <option value="Doe">Doe</option>
                <option value="Nelson">Nelson</option>
            </select>
        </th>
        ....
    </tr>
</thead>

If the user wants to filter according to first name, he/she types something in the respective field, if he/she wants to filter according to last name, he/she selects from the drop down. This then activates a javascript function which filters the rows of the table.

Now, is there a convenient way to get all those <th>'s where the user has typed or selected something?

.is(':empty') or checking for the visibility would not work obviously, and the only other option I can think of right now is to somehow check whether there is an element inside the th (because there could also be columns without filter), and if it's an input tag or select tag and then either query .val() or .(':selected').val() respectively.

So the question basically is, whether there's a way to check that with 1 function regardless of the type of element inside the <th> - I'm thinking of maybe there is a way to check if there is a visible character (on the DOM) somewhere inside the <th> (including it's sub elements even)?

Thanks

Edit

I'm basically looking for a selector to select:

• th's which have an input element AND the input element is not empty
• th's which have a select element AND the some option selected (who's value is not empty by the way)

What I don't want to get is:

• th's which are empty
• th's which have an input element but it is empty
• th's which have a select element but no option selected or the selected option's value is null

Hope that's clearer

CodePudding user response：

Perhaps you mean this? I am not testing the tag does not have a value (for example a span or such) - that needs more coding

const textAndValues = [...document.querySelectorAll('th')]
  .flatMap(th => [...th.childNodes]
    .map(node => node.nodeType === 1 ? node.value : node.textContent.trim()).filter(val => val)
  );

console.log(textAndValues)

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr>
      <th><input id="FirstNameFilter" /></th>
      <th>
        <select id="LastNameFilter">
          <option value="Smith">Smith</option>
          <option value="Doe">Smith</option>
          <option value="Nelson">Smith</option>
        </select>
      </th>
    </tr>
  </thead>
</table>