Creating a table with 3 columns using javascript

Question

I was advised that the following code would create a table but nothing seems to happen?

What I am wanting is a table with question numbers in A1 B1 C1 up to 8 questions in each column. Any help appreciated.

var totalQuestions;

function createSheet() {
  var sheet = "";

  totalQuestions = 8;

  sheet += "<div><table>";

  for (var i = 0; i < totalQuestions; i++) {
    sheet += "<tr>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "</tr>";
  }

  sheet += "</table></div>";
}

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

What you've posted is only generating a table and set it to a variable. Please provide more details to help others to help you. — GanHJ
– GanHJ, Commented May 5, 2021 at 12:50
1. You never call the function. 2. The function never returns anything. 3. The function never changes the page. Three reasons why nothing happens. You need to solve 1. and at least one of the other two. — VLAZ
– VLAZ, Commented May 5, 2021 at 12:50

Mr. Polywhirl · Accepted Answer · 2021-05-05 14:29:16Z

You need to insert the HTML text into your document. Also, do not forget to return the sheet at the end of the function.

See: Element.insertAdjacentHTML()

var totalQuestions;

function createSheet() {
  var sheet = "";

  totalQuestions = 8;

  sheet += "<div><table>";

  for (var i = 0; i < totalQuestions; i++) {
    sheet += "<tr>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "</tr>";
  }

  sheet += "</table></div>";
  
  return sheet;
}

document.body.insertAdjacentHTML('beforeend', createSheet());

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

You could even create a function for this:

const appendHtmlTextAsChild = (htmlText, parentElement = document.body) => {
  parentElement.insertAdjacentHTML('beforeend', htmlText);
};

appendHtmlTextAsChild(createSheet());

Update

You could simplify this with a template literal:

const range = (n, valueOrFunction) => (arr =>
  typeof valueOrFunction === 'function'
    ? arr.fill(null).map((v, i) => valueOrFunction(i))
    : arr.fill(valueOrFunction))(new Array(n));

const rangeMap = (n, valueOrFunction) => range(n, valueOrFunction).join('');

const appendHtmlTextAsChild = (htmlText, parentElement = document.body) =>
  parentElement.insertAdjacentHTML('beforeend', htmlText);

const createQuestionSheet = (questions, choices) => `
  <div>
    <table>
      <tbody>
        ${rangeMap(questions, question => `
          <tr>
            ${rangeMap(choices, choice => `
               <td class="question">
                <div class="questionNumber">
                  ${String.fromCharCode(65 + choice) + (question + 1)}
                </div>
              </td>
            `)}
          </tr>
        `)}
      </tbody>
    </table>
  </div>
`;

appendHtmlTextAsChild(createQuestionSheet(8, 4));

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

Thanks I had a button to call function in HTML just forgot to add it on here. So all that was missing is the return sheet?
I guess, because that is how you get the text to return from the function.

Collectives™ on Stack Overflow

Creating a table with 3 columns using javascript

1 Answer 1

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related