Iterate 2 tables to show difference of each row element in a popup

Question

I have 3 tables and at a moment I am selecting any 2 tables and I want to show the difference of each row element of selected tables in a popup in a different column along with the tables .I am stuck here how to compute the difference between the each row of two selected tables. How can i iterate both the tables and then get the result?

var selectedRows = document.getElementsByClassName('selected');
        limit = 0; //set limit

        checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
        function checker(elem) {
            if (elem.checked) {
                limit++;
            } else {
                limit--;
            }

            for (i = 0; i < checkboxes.length; i++) {

                if (limit == 2) {
                    if (!checkboxes[i].checked) {
                        checkboxes[i].disabled = true;

                    }

                } else {

                    if (!checkboxes[i].checked) {
                        checkboxes[i].disabled = false;
                    }

                }
            }

        }

        for (i = 0; i < checkboxes.length; i++) {
            checkboxes[i].onclick = function () {
                checker(this);
            }
        }

        var checkedArray;
        function myFunction(event) {
            event.target.parentElement.parentElement.className =
                event.target.checked ? 'selected' : '';

            var elements = document.getElementsByTagName("INPUT");
            checkedArray = new Array();
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].type === 'checkbox' && elements[i].checked) {
                    checkedArray.push(elements[i].id);
                }
            }
            console.log(checkedArray);
        }
        function clickbtn() {
            // var table;
            // for (let i = 0; i < checkedArray.length; i++) {
            //  console.log("c", checkedArray[i])
            //  table = new Array();
            //  for (let i = 0; i < checkedArray.length; i++) {
            //      table.push("table" + checkedArray[i])

            //  }
            //  console.log(table)
            // }
            // for (let i = 0; i < table.length; i++) {

            //  var t1 = document.getElementById(table[i]);
            //  var t2 = document.getElementById(table[i + 1]);


            // }
            const buildTable = (arr) => {
                let table = document.querySelector("#diff-table");
                if (table) table.remove();

                table = document.createElement("table");
                table.id = "diff-table";
                const thead = document.createElement("thead"),
                    thA = document.createElement("th"),
                    thB = document.createElement("th"),
                    thDiff = document.createElement("th");
                thA.innerText = "Plan A";
                thB.innerText = "Plan B";
                thDiff.innerText = "Difference";
                thead.append(thA, thB, thDiff);
                table.append(thead);

                arr.forEach((i) => {
                    const tr = document.createElement("tr"),
                        tdA = document.createElement("td"),
                        tdB = document.createElement("td"),
                        tdDiff = document.createElement("td");
                    tdA.innerText = "$" + i["planA"];
                    tdB.innerText = "$" + i["planB"];
                    tdDiff.innerText = "$" + i["diff"];
                    tr.append(tdA, tdB, tdDiff);
                    table.append(tr);
                });

                document.body.append(table);
            };
            const checked = document.querySelectorAll(":checked"),
                arr = [];
            if (checked.length !== 2) return;

            const planA = document
                .querySelector(":checked:first-of-type")
                .closest("table")
                .querySelectorAll("td");
            const planB = document
                .querySelector(":checked:last-of-type")
                .closest("table")
                .querySelectorAll("td");

            planA.forEach((cell, i) => {
                const valA = +cell.innerText.replace(/[^\d.-]/g, '');
                const valB = +planB[i].innerText.replace(/[^\d.-]/g, '');
                arr.push(valA - valB);
            });

            buildTable(arr);

            

        }

.table_container{
        float:left;
        width:25%;
    }
    .container::after{  
  content: "";
  clear: both;
  display: table;
    }
    table{
        margin: 0 auto; 
        
        border-radius: 10px;
    }
    tr{
        padding: 15px;
        text-align: center;
    }
    td{
        color: black;
        text-align: center;
        vertical-align: middle;
        border: 1px double white;
        height: 50px;
        background-color: #e1edf9;
        width:272px;
    }
    .sub_text{
        font-size: 12px;
        font-style: italic;
        color: #0071ce;
        font-weight: 100;
    }
    th{
        background-color: #0071ce;
        text-align: center;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: white;
        font-weight: bold;
    }
    .header{
        color: #0071ce;
        font-weight: bold;
        padding: 10px;
    }

jrob11 · Accepted Answer

Here's the solution I built.

NOTES I removed INLINE JS. You will have to design your own CSS for the newly created element called #diff-table. Also, this checks to make sure EXACTLY 2 plans were selected (if no plans, 1 plan, or 3 plans were selected, it will not run).

    const btn = document.querySelector("button");

    btn.addEventListener("click", () => {
      const checked = document.querySelectorAll(":checked"),
        arr = [];
      if (checked.length !== 2) return;

      const plans = document.querySelectorAll(":checked"),
        planA = plans[0].closest("table").querySelectorAll("td"),
        planB = plans[1].closest("table").querySelectorAll("td");

      planA.forEach((cell, i) => {
        const valA = +cell.innerText.replace(/[^\d.-]/g, '');
        const valB = +planB[i].innerText.replace(/[^\d.-]/g, '');
        arr.push({ planA: valA, planB: valB, diff: valA - valB });
      });

      buildTable(arr);
    });

    const buildTable = (arr) => {
      let table = document.querySelector("#diff-table");
      if (table) table.remove();

      table = document.createElement("table");
      table.id = "diff-table";
      const thead = document.createElement("thead"),
        thA = document.createElement("th"),
        thB = document.createElement("th"),
        thDiff = document.createElement("th");
      thA.innerText = "Plan A";
      thB.innerText = "Plan B";
      thDiff.innerText = "Difference";
      thead.append(thA, thB, thDiff);
      table.append(thead);

      arr.forEach((i) => {
        const tr = document.createElement("tr"),
          tdA = document.createElement("td"),
          tdB = document.createElement("td"),
          tdDiff = document.createElement("td");
        tdA.innerText = "$" + i["planA"];
        tdB.innerText = "$" + i["planB"];
        tdDiff.innerText = "$" + i["diff"];
        tr.append(tdA, tdB, tdDiff);
        table.append(tr);
      });

      document.body.append(table);
    };

Iterate 2 tables to show difference of each row element in a popup

Answers (2)

Related Questions