EDIT: I couldn't solve the problem so I removed the bootstrap classes and have made all buttons on my own so now they are aligned perfectly and it seems like the bootstrap classes were messing things up
How can I align different td in a tr in a HTML table. Here you can find the screenshot of what I am trying to say: Image of different elements that I want to vertically align in a tr element
Any suggestions would be helpful. Thanks in advance!
This tr is generated by js. Code:
let itemRow = document.createElement('tr');
let item1 = document.createElement('td');
let item2 = document.createElement('td');
let item3 = document.createElement('td');
let item4 = document.createElement('td');
let item5 = document.createElement('td');
let item6 = document.createElement('td');
let btnRemove = document.createElement('button');
let btnEdit = document.createElement('button');
item1.innerHTML = bookTitle;
item2.innerHTML = author;
item3.innerHTML = recipient;
item4.innerHTML = dateIssued;
btnRemove.className = 'btn btn-outline-danger btn-remove';
btnRemove.textContent = 'X';
btnEdit.className = 'btn btn-outline-success btn-edit';
btnEdit.textContent = 'Edit';
itemRow.appendChild(item1);
itemRow.appendChild(item2);
itemRow.appendChild(item3);
itemRow.appendChild(item4);
item6.appendChild(btnEdit);
item5.appendChild(btnRemove);
itemRow.appendChild(item6);
itemRow.appendChild(item5);
list.appendChild(itemRow);
A basic table, without any padding should be vertically aligning everything by default.
It looks like you may have to undo/override any CSS thats being applied to your markup, either with your own CSS or the one from Bootstrap, as #burham noticed you are using it.
This is a very simple fiddle example with each <td> being 80px in height to show the 'natural' vertical alignment of a table.
https://jsfiddle.net/pzm6ktv5/
Related
I'm making a react component for selecting and deselecting tags. For this is want the tags to be shown in a table, with a checkbox next to them.
My issue is that I can't set the text part of it, when creating them through JavaScript. Neither through innerHTML nor innerText. It shows in the inspector, but not in my browser (Chromium).
So far my method looks like this:
generateTagTable() {
let tbl = document.getElementById('tagTable')
tbl.className = 'tagTable'
let tbdy = document.createElement('tbody')
for (let i = 0; i < this.allTags.length; i++) {
let tr = document.createElement('tr')
let td = document.createElement('td')
let div = document.createElement('div')
let cb = document.createElement('input')
div.className = 'checkContainer'
cb.id = 'checkTd'
cb.type = 'checkbox'
cb.innerText = 'Tag'
div.appendChild(cb)
td.appendChild(div)
tr.appendChild(td)
tbdy.appendChild(tr)
}
tbl.appendChild(tbdy)
}
Which results in this:
I know that I can achieve my goal by doing the this:
generateTagTable() {
let tbl = document.getElementById('tagTable')
tbl.className = 'tagTable'
let tbdy = document.createElement('tbody')
for (let i = 0; i < this.allTags.length; i++) {
let tr = document.createElement('tr')
let td = document.createElement('td')
td.className = 'checkContainer'
td.innerHTML = '<div class="flexcenter"><input type="checkbox" name="tagCheck"/>' + this.allTags[i] + '</div>'
tr.appendChild(td)
tbdy.appendChild(tr)
}
tbl.appendChild(tbdy)
}
But that leaves me with problem when trying to assign the onClick, and generally leaves me with less control I feel.
The result of the working one is this, and what i'm trying to achieve is this:
Checkboxes (input elements in general) don't have content (they're void elements), so innerText and textContent and innerHTML don't have any function in relation to them.
If you want text next to your checkbox, the usual thing is to wrap a label around it. In markup, that would be:
<label>
<input type="checkbox">
Text
</label>
Adjusting your code, you might do:
// ...
let td = document.createElement('td')
let div = document.createElement('div')
let label = document.createElement('label') // *** (added)
label.innerText = 'Tag' // *** (moved and modified)
let cb = document.createElement('input')
div.className = 'checkContainer'
cb.id = 'checkTd'
cb.type = 'checkbox'
label.insertBefore(cb, label.firstChild); // *** (added)
div.appendChild(label) // *** (modified)
// ...
That said, it would be much simpler via markup (tr.innerHTML = ...), and browsers are very fast parsing markup.
// ...
let tr = document.createElement('tr')
tr.innerHTML = `
<td>
<div class="checkContainer">
<label>
<input type="checkbox" id="checkTd">
Tag
</label>
</div>
</td>`;
tbdy.appendChild(tr)
// ...
Side note: As it stands, your code creates multiple input elements with the same id (checkTd). That's invalid, only one element in a document can have that id. Depending on what you're doing, you may not need an id at all, or you may need to add a suffix to it (perhaps using i) to make it unique.
I am trying to make a color swatch that can be used to select colors from. My thought is to create a table, and have each cell of the table be a button from which the user can click to select the color they want to use. Th this point I have not even tried to give my buttons any functionality until I can actually determine that they are generating I am simply trying to lay out the table at this point and test whether or not the buttons are appending to each cell. This is the reason for the innerHTML = 'test'. However nothing is appearing so I fear the buttons are not properly appending. I am brand new to coding and would prefer to stick with vanilla JS for the time being. Mahalo
// get reference for the pixelPainter div
let body = document.getElementById('pixelPainter');
//create the color swatch
let swatch = document.createElement('table');
swatch.id = 'swatch_base';
for (var i = 0; i<6; i++){
let row = document.createElement('tr');
//create columns and attach buttons to each cell so that the buttons can be selected to choose a color
for (var i = 0; i<10; i++){
let cell = document.createElement('td');
let colorButton = document.createElement('button');
colorButton.className('colorChoice');
colorButton.innerHTML('test'); // just trying to test for button
cell.appendChild(colorButton);
row.appendChild(cell);
}
swatch.appendChild(row);
}
body.appendChild(swatch);
swatch.setAttribute('border', '1');
try this https://jsfiddle.net/qnrra88L/
actually, className and innerHTML are not a functions, also className should be classNames
change these two lines
colorButton.className('colorChoice');
colorButton.innerHTML('test');
as
colorButton.classNames = 'colorChoice';
colorButton.innerHTML = 'test';
So I have created elements in my html using javascript. The only problem is that my button is not showing up. Following is my code:
var search_div1 = document.createElement("div");
search_div1.className = "input-group row-fluid";
var search_div2 = document.createElement("div");
search_div2.className = "span4 offset4";
var search_input = document.createElement("input");
search_input.className = "form-control offset8";
search_input.id = "searchText";
search_input.type = "text";
search_input.placeholder = "Search...";
search_input.style.width = "200px";
search_input.style.marginLeft = "550px";
var search_span = document.createElement("span");
search_span.className = "input-group-btn";
search_span.width = "50px";
var search_button = document.createElement("button");
search_button.type = "submit";
search_button.id = "search";
search_button.name = "search";
search_button.className = "btn btn-flat";
search_button.onclick = myFunction;
var search_icon = document.createElement("i");
search_icon.className = "fa fa-search";
search_button.appendChild(search_icon);
search_span.appendChild(search_button);
search_input.appendChild(search_span);
search_div2.appendChild(search_input);
search_div1.appendChild(search_div2);
Everything else is showing perfectly except for the search_button and I have created buttons like this that work perfectly. Can someone kindly assist me? Thanks in advance.
You're using .appendChild() incorrectly. For example, this line of code:
search_input.appendChild(search_span);
Is trying to make a <span> a child of an <input>. That is not legal HTML.
Remember x.appendChild(y) makes y a child of x in the DOM hierarchy.
We can't really advise what the exact right sequence of appending is because we don't know what HTML structure you're trying to end up with. If you show us what you want the DOM hierarchy to look like when you're done, we can help with the proper code to achieve that.
i'm using javascript to add rows to a table dynamically:
function addRow() {
var table = document.getElementById("bestelling");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-5);
var cell1 = row.insertCell(0);
var bedrag = document.createElement("input");
bedrag.type = "text";
bedrag.name = "bedrag[]";
cell1.appendChild(bedrag);
}
This seems to work perfectly, except I want the first cell to align right.
Any suggestions?
You can try adding this (I am assuming that cell1 is the "first cell" that you are referring to):
cell1.style.textAlign = "right";
This styles the cell with CSS textAlign right.
Alternatively, you can set a class name to the cell with this JavaScript code:
cell1.className = "alignRight"
And use CSS to set the align right.
.alignRight{
text-align:right;
}
To make this even simpler, you could use jQuery - http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
$("<tr id='new-row'>").insertBefore("#first-row") // # is the id selector
Then you can set the style and content of #new-row using the html() and css() methods:
$("#new-row").css("text-align","right");
$("#new-row").html("Hello world!");
Hope this helps.
Fine, my question is as follows. I am adding rows to a table dynamically using the DOM, and everything goes really well. However, in one of the cells I need to add this calendar: http://www.softcomplex.com/products/tigra_calendar/
When I execute the code to add the calendar, it will create it wherever I place it and mess with everything. What I want to do, is to attach that calendar to the cell and that it executes whenever the nodes enter to the table. This is the code:
function addpago()
{
var i = 0;
//Create a select
var cuota=document.createElement('select');
cuota.name="cuota"+cantpagos;
cuota.id="cuota"+cantpagos;
for(i=1;i<=11;i++)
{
cuota.options[i-1]=new Option("Cuota "+i, i);
}
//Create an input and add an event, this code works correctly
var monto=document.createElement('input');
monto.type='text';
monto.name=monto.id='monto'+cantpagos;
if(monto.addEventListener)
monto.addEventListener("blur", sumpagos, false);
else if(monto.attachEvent)
monto.attachEvent("onblur", sumpagos);
else
monto.onblur = sumpagos;
monto.size=6;
//Create an input
var ncheque = document.createElement('input');
ncheque.type='text';
ncheque.name=ncheque.id='cheque'+cantpagos;
ncheque.size=10;
//Create a select
var bancos = document.createElement('select');
bancos.name=bancos.id='banco'+cantpagos;
bancos.options[0]=new Option("BANCO DE CHILE",1);
bancos.options[1]=new Option("BANCOESTADO",2);
bancos.options[2]=new Option("BANCO DE CRÉDITO E INVERSIONES",3);
bancos.options[3]=new Option("BANCO SANTANDER",4);
bancos.options[4]=new Option("BANCO ITAÚ",5);
//Create an input
var plaza = document.createElement('input');
plaza.type='text';
plaza.name=plaza.id='cheque'+cantpagos;
plaza.size=6;
//Create an input
var fecha = document.createElement('input');
fecha.type='text';
fecha.name=fecha.id='fecha'+cantpagos;
fecha.readOnly=true;
fecha.size=14;
//Create a tr, add several td's and attach each element created before to the child td's
row = document.createElement('tr');
cell = document.createElement('td');
cell.appendChild(cuota);
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(monto);
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(ncheque);
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(bancos);
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(plaza);
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(fecha);
//I need to add the calendar at this point, but I can't figure out how
cell.appendChild(new tcal ({'formname': 'ingpagos', 'controlname': 'fecha'+cantpagos, 'imgpath': 'www.codesin.cl/Tigra/img/'}));
row.appendChild(cell);
document.getElementById('tabpagos').appendChild(row);
cantpagos++; //Global variable being updated
document.getElementById('cantpagos').value=cantpagos;
}
What should I do? Thanks beforehand...
I've used Tigra Calendar before. Why are you adding it as a node? It's an object you just instantiate, the program takes care of modifying the DOM etc. =)
You do however need to wait to instantiate it until after the input field is IN the DOM =)
...
row.appendChild(cell);
document.getElementById('tabpagos').appendChild(row);
new tcal ({'formname': 'ingpagos', 'controlname': 'fecha'+cantpagos, 'imgpath': 'www.codesin.cl/Tigra/img/'})
Though that imgpath looks suspect so you may need to play with it some =)