Category: JavaScript

Sometimes, we want to generate HTML table from a 2D JavaScript array.

In this article, we’ll look at how to generate HTML table from a 2D JavaScript array.

How to generate HTML table from a 2D JavaScript array?

To generate HTML table from a 2D JavaScript array, we can use the insertRow and insertCell methods.

For instance, we write

const createTable = (tableData) => {
  const table = document.createElement("table");
  let row = {};
  let cell = {};

  tableData.forEach((rowData) => {
    row = table.insertRow(-1);
    rowData.forEach((cellData) => {
      cell = row.insertCell();
      cell.textContent = cellData;
    });
  });
  document.body.appendChild(table);
};

to create a table with createElement.

Then we loop through the tableData array with forEach.

In it the callback, we call insertRow to insert a tr element.

Then we loop through the rowData with forEach and call insertCell to insert a td.

Then we set its textContent to cellData.

Finally, we call appendChild to append the table to the body element.

Conclusion

To generate HTML table from a 2D JavaScript array, we can use the insertRow and insertCell methods.

To update and delete a cookie with JavaScript, we set the document.cookie string.

For instance, we write

document.cookie = "username=Arnold";

to set document.cookie to the cookie string with the key and value.

We remove the cookie by adding the expires key and setting its value to a date in the past.

Conclusion

To update and delete a cookie with JavaScript, we set the document.cookie string.

Sometimes, we want to get the text area value of a CKEditor text area with JavaScript.

In this article, we’ll look at how to get the text area value of a CKEditor text area with JavaScript.

How to get the text area value of a CKEditor text area with JavaScript?

To get the text area value of a CKEditor text area with JavaScript, we use the getData method.

For instance, we write

<textarea id="editor1" name="editor1">This is sample text</textarea>

to add a text area.

Then we write

const editorText = CKEDITOR.instances.editor1.getData();

to call getData to get the text area’s value.

Conclusion

To get the text area value of a CKEditor text area with JavaScript, we use the getData method.

Sometimes, we want to check if a website is open in another tab with JavaScript.

In this article, we’ll look at how to check if a website is open in another tab with JavaScript.

How to check if a website is open in another tab with JavaScript?

To check if a website is open in another tab with JavaScript, we use the BroadcastChannel constructor.

For instance, we write

const bc = new BroadcastChannel("my-awesome-site");

bc.onmessage = (event) => {
  if (event.data === `is-open`) {
    bc.postMessage(`yes`);
    alert(`Another tab of this site just got opened`);
  }
  if (event.data === `yes`) {
    alert(`An instance of this site is already running`);
  }
};

bc.postMessage(`is-open`);

to create a BroadcastChannel on our site.

Then we set is onmessage property to a function that checks for messages with event.data.

We call postMessage to send data to all the tabs.

If onmessage is called, this means at least 1 tab is open.

Conclusion

To check if a website is open in another tab with JavaScript, we use the BroadcastChannel constructor.