Category: JavaScript Answers

To get the row count of an HTML table with JavaScript, we can use the rows.length property to get the total number of rows in the table.

And to get the number of rows in tbody , we can use the tBodies[0].rows.length property.

For instance, if we have the following table:

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer</td>
    </tr>
  </tfoot>
</table>

We can write:

const table = document.querySelector("table");
const totalRowCount = table.rows.length;
const tbodyRowCount = table.tBodies[0].rows.length;
console.log(totalRowCount, tbodyRowCount)

to get the total number of rows with table.rows.length where table is the table selected with document.querySelector .

And to get the number of rows in tbody , we write:

table.tBodies[0].rows.length

Therefore totalRowCount is 5 and tbodyRowCount is 3.

To return a number of days, hours, minutes, and seconds between two dates with JavaScript, we can convert the start and end dates to timestamps.

Then we can calculate the number of days, hours, minutes, and seconds between two dates difference between the 2 dates.

For instance, we can write:

const dateFuture = new Date(2022, 1, 1, 1, 1, 1)
const dateNow = new Date(2021, 1, 1)

let delta = Math.abs(dateFuture - dateNow) / 1000;
const days = Math.floor(delta / 86400);
delta -= days * 86400;
const hours = Math.floor(delta / 3600) % 24;
delta -= hours * 3600;
const minutes = Math.floor(delta / 60) % 60;
delta -= minutes * 60;
const seconds = delta % 60
console.log(days, hours, minutes, seconds)

We have the dateFuture and dateNow date objects that we created with the Date constructor.

Then we calculate the difference between them in seconds with:

let delta = Math.abs(dateFuture - dateNow) / 1000;

Then to get the numbers of days difference between them, we write:

const days = Math.floor(delta / 86400);

Then we get the hours difference with:

delta -= days * 86400;
const hours = Math.floor(delta / 3600) % 24;

We subtract the days in seconds so that we can get the hours difference.

Similarly, we get the minutes with:

delta -= hours * 3600;
const minutes = Math.floor(delta / 60) % 60;

We subtract the hours in seconds from the delta to get the minutes difference.

And then to get the seconds difference with:

delta -= minutes * 60;
const seconds = delta % 60

And we get that days is 365, and hours , minutes , and seconds are all 1.

Conclusion

To return a number of days, hours, minutes, and seconds between two dates with JavaScript, we can convert the start and end dates to timestamps.

Then we can calculate the number of days, hours, minutes, and seconds between two dates difference between the 2 dates.

To create a JavaScript setInterval callback function that clears itself, we can call the clearInterval function with the timer handle as the argument.

For instance, we can write:

const myInterval = setInterval(() => {  
  console.log('hello')  
  clearInterval(myInterval);  
}, 50);

to call setInterval with a callback that logs 'hello' and then calls clearIntrval with the timer handle returned by setInterval to clear the timer.

The 2nd argument is set to 50 so that the callback runs every 50 milliseconds.

But the callback will only run once since we called clearInterval with myInterval to stop the timer.

Sometimes, we want to sort divs in jQuery based on data-sort attribute values.

In this article, we’ll look at how to sort divs in jQuery based on data-sort attribute values.

Sort Divs in jQuery Based on data-sort Attribute Value

To sort divs in jQuery based on data-sort attribute values, we can use the JavaScript array sort method to sort the elements based on the data-sort attribute value.

For instance, if we have the following HTML:

<section>
  <div data-sort='12'>div12</div>
  <div data-sort='4'>div4</div>
  <div data-sort='19'>div19</div>
  <div data-sort='1'>div1</div>
  <div data-sort='8'>div8</div>
</section>

Then we can display the divs in the order of their data-sort attribute values by writing:

const result = [...$('div')].sort((a, b) => {
  const contentA = parseInt($(a).data('sort'));
  const contentB = parseInt($(b).data('sort'));
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
});

$('section').html(result);

We select the divs with $ and convert the nodelist to an array with the spread operator.

Then we call sort on the array with a callback that gets the data-sort attribute value of element a and b with:

$(a).data('sort')

and

$(b).data('sort')

Then we call parseInt to parse the values into integers.

Then we return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; to sort the elements in ascending order of their data-sort attribute values.

And finally, we put the sorted divs into the section element with:

$('section').html(result);

Now we should see:

div1
div4
div8
div12
div19

displayed.

Conclusion

To sort divs in jQuery based on data-sort attribute values, we can use the JavaScript array sort method to sort the elements based on the data-sort attribute value.

To make the HTML canvas full screen with JavaScript, we can set the canvas width and height to the browser window width and height respectively.

For instance, we can create a canvas with:

<canvas style="border:1px solid #000000;">
</canvas>

Then we can make sure the canvas is always set to the width and height of the window by writing:

const canvas = document.querySelector("canvas");

const resize = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

resize()
window.addEventListener('resize', resize)

We select the canvas with document.querySelector .

Then we add the resize function that sets the canvas width and height to the window.innerWidth and innerHeight respectively to resize the canvas to fit the window.

We call the resize function to resize the canvas when the page loads.

And then we watch the resize event of the window with window.addEventListener and set resize as the callback to make sure the canvas is resized when the browser tab is resized.