I am currently working with an array of elements that I need to iterate over. For each element, I create a <td></td> tag.
When dealing with 10 elements, it results in a table with one column and 10 rows.
Is there a method, using either HTML or CSS, to split this single column into two columns so that I can display 5 elements in each?
You have the option to implement code similar to this:
let table = document.createElement('table');
let array = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
for (let i=0; i<array.length; i+=2) { // looping through every 2 items
let tr = document.createElement('tr');
let td = document.createElement('td');
td.innerHTML = array[i]; // selecting the first element
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = array[i+1]; // selecting the second element
tr.appendChild(td);
table.appendChild(tr);
}
document.getElementsByTagName('body')[0].appendChild(table);table td { border: 1px solid black; }Here's a suggestion for you:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>If you're considering manually accomplishing this task, you'll need to follow this table structure:
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>Keep in mind that "Tr" represents a row.
However, if you prefer an automated approach using JScript, you'll have to incorporate two "if" statements or utilize a "while" loop.
We would have been able to provide more assistance if the code was available for reference.
We hope you found this information useful.
Take a look at the code snippet below to see how it works. Here's what was done:
A JavaScript function was written that:
(a) Iterates through an array,
(b) Creates a row,
(c) Adds two cells to the table (the counter i is incremented by 2),
(d) Sets the innerHTML of the cells to the value from the array.
function populateTable() {
var table = document.createElement('table');
var array = ['a', 'b','c','d','e','f','g','h']
for(i=0 ; i<array.length ;i+=2){
var row = table.insertRow(0);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.innerHTML = array[i];
cell2.innerHTML = array[i+1];
}
document.getElementsByTagName('body')[0].appendChild(table);
}table, td {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="populateTable()">Populate Table</button>
</body>
</html>I have received an object from a legacy server that I need to restructure on the client-side using JavaScript, jQuery, or Underscore.js. Here is the original structure of the object: [ { "Id":{ "LValue":1, "Value":1 }, ...
Although I have reviewed existing questions and answers related to this issue, I found that the solutions provided do not suit my specific situation. Discussing the differences between client-side JavaScript and server-side PHP, two common solutions are: ...
Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...
Hours of coding and suddenly my app is rendering everything twice. Can't figure out why, please help! https://i.sstatic.net/RhMid.png app.js import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import "bootstrap/ ...
Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...
As I consider converting my WordPress website to static HTML pages, I'm planning on editing them in tools like Responsive Site Designer, Dreamweaver, or SublimeText. My main concern is how I will organize content into categories without the convenien ...
Recently, I started working with Typescript and Aurelia framework. Currently, I am facing an issue while trying to implement the @autoinject decorator in a VS2015 ASP.NET MVC 6 project. Below is the code snippet I am using: import {autoinject} from "aure ...
I need assistance in identifying and retrieving duplicate objects within an array that share similarities in 2 specific properties. Consider the object structure below: let arry = [ {Level: "A-1", Status: "approved"}, {Level: &q ...
I am currently using this code to search for an address, drop a marker, and drag it afterwards. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title&g ...
I have encountered an issue with a JSON file that I fetch. The array syllables is capable of holding up to strings max. However, when I exclude 2 words, I end up with 2 words and 2 empty strings. Nevertheless, my front-end still expects 4 "strings". So, it ...
Below is the code for my foo-controller.js. module.exports = function(params) { var router = require('express').Router(); var db = params.db var controller = {}; controller.getFoo = function (req, res) { // logic to ret ...
I have two different perspectives, one called logo and the other called folder. The logo view should display something from the folder view if the folder is empty. logo.html <template> <require from="company-assets/folders"></require> ...
I'm looking to extract and parse the content of HTML pages using the Jsoup API, which can be found at . However, I've encountered a challenge in extracting CSS that is located in a different folder. How can this be achieved? Currently, my code ...
I have developed a function that checks if the selected file names already exist in the database. It currently alerts a message for each file name found in the database, which can be overwhelming with multiple files. I am looking for suggestions on how t ...
I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of reada ...
I am attempting to create a program that allows users to add circles to an image by clicking on it. Essentially, when the user clicks at coordinates (x,y), a circle with a radius of 10 will appear at that location. I am exploring ways to implement meta-pro ...
I am looking to retrieve user storage data (local and session) from a specific tab, similar to what is shown in this app (see screen below). From my understanding, I need to access the window object of the active tab. While I have obtained the object, I a ...
My function serves as an abstract factory for creating JavaScript objects. Here is the code: var $class = function(definition) { var constructor = definition.constructor; var parent = definition.Extends; if (parent) { var F = function ...
I'm attempting to create a functionality where checking one checkbox will uncheck another, similar to how radio buttons work. I'm relatively new to Vue.js, so I may be missing something in my code. Here are the two input elements: <label for=& ...
After stumbling upon a post on the internet, I discovered that Papertrail offers the ability to log using ANSI colors. This is particularly appealing to me as my node.js app generates numerous logs, and adding color helps me decipher the information during ...