0

I am using Office JS API to create an Office add-in, and wanted to capture checkbox events when selecting values. I call an API that returns a JSON object, with a key-value pair, where the value is an array of strings. I then display the object as a table.

I have a table tag:

<table id="out-table"></table>

..and a button:

<button class="ms-Button ms-Button--hero" id="sim">Process</button>

..which is triggered by:

document.getElementById("sim").onclick = process;

..and in my JS code (inside the process function), I create the table rows and data values:

const table = document.getElementById("out-table");

proposals.forEach((pr, idx) => {
    const sm = summaries[idx];

    const row = document.createElement("tr");

    const prElement = document.createElement("td");
    const smElement = document.createElement("td");

    prElement.style.fontSize = "9px";
    prElement.style.fontWeight = "bold";
    smElement.style.fontSize = "9px";

    const prContent = document.createTextNode(pr);
    const smContent = document.createTextNode(truncate(sm, 150));

    const prSelect = document.createElement("input");
    prSelect.type = "checkbox";
    prSelect.id = "ss"; // does this make sense to have it the same ID?
    prSelect.value = pr;

    const label = document.createElement("label");
    label.htmlFor = pr;

    prElement.appendChild(prSelect);
    prElement.appendChild(label);
    prElement.appendChild(prContent);
    smElement.appendChild(smContent);

    row.appendChild(prElement);
    row.appendChild(smElement);

    table.appendChild(row);
  });

..where proposals and summaries are arrays of strings. The input element created just adds a checkbox before the prContent with its label so it something like this:

A header Another header
[x] V1 row
[ ] V2 row

When the table is populated, I want to multi-select the checkboxes then press a button that captures the values (V1, V2), and use them - log them for example. How would I do this? I want to be able to dynamically select and deselect and press a button that outputs only the selected values.

Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
Iden Crisler
  • 5
  • 2
  • can you create a code pen or a stackblitz or jsfiddle to demo your full code – joyBlanks May 03 '23 at 16:14
  • I'll try but unfortunately running everything on a custom Office NodeJS project (yeoman generator for office), and I would have to include everything. It's a PowerPoint add-in project. – Iden Crisler May 03 '23 at 16:47
  • this isn't relevant to the table at all, isn't it? here's how you can collect values from an array of checkboxes: https://stackoverflow.com/a/46015793/3807365 – IT goldman May 03 '23 at 17:50

0 Answers0