I have a table that adds rows dynamically as new users become active. The function will add a new row that displays the user's name and a button that activates a lightbox to show more information. The name and button are put in a single cell, but I'd like to right align the button and left align the name within the cell. I found this post Right align and left align text in same HTML table cell that shows how to do it with divs in HTML, but I need to do this dynamically. Anyone have a guess? I tried the following code, it works, but doesn't justify the name and button how I'd like. It just centers them within the cell. I'd appreciate any help.
function addRow(tableID, user, phone, age, city, zipCode) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
tabbody=document.getElementsByTagName("tbody").item(2);
cell1 = document.createElement("TD"); //Create New Row
leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left;width:50%;"); //Set div attributes
rightDiv = document.createElement("div"); //Create right div
rightDiv.id = "right"; //Assign div id
rightDiv.setAttribute("style", "float:right;width:50%;"); //Set div attributes
user_name = document.createTextNode(user + ' '); //Set user name
details_btn = document.createElement("button"); //Create details button
btn_txt = document.createTextNode("Details"); //Create button text
details_btn.appendChild(btn_txt); //Add "Details" to button text
details_btn.onclick = function(){moreInfo(user, phone, age, city, zipCode);}; //Assign button function
cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
Try this:
function creatediv() {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.style.width = 300;
newdiv.style.height = 300;
newdiv.style.position = "absolute";
newdiv.style.background = "#C0C0C0";
newdiv.innerHTML = "Dynamic Div";
document.body.appendChild(newdiv);
}
The problem is that you need to place the username and button inside the floating divs you have created, whereas you have placed them in the same cell as the div, but at the same level as the divs.
So try changing this section:
cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
to this:
leftDiv.appendChild(user_name); // Add name to left div
rightDiv.appendChild(details_btn); // Add button to right div
cell1.appendChild(leftDiv);
cell1.appendChild(rightDiv);
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
Also, if more than 1 row is going to be added, the divs will get duplicate IDs of "left" and "right". Use a class instead.
Finally, you shouldn't need to set the width of the rightDiv to 50%. It should automatically right-align itself, if that is what you are after.
Instead of giving css rules individually, use css rule set directly like this :
div.className = "div_class_right/left"; //for creating right/left div respectively.
And create rule set div_class like this in your css :
.div_class_right/left{
float : right/left;
width : 50%;
}
Related
I have an html table with 14 columns and 11 rows. Each td element has a specific id associated with it that correlates to the column and row. For example the 3rd column and 2nd row would be <td id="3-2"></td>. I'm querying a database that has information which goes into each td based on what day the user chooses on a datepicker. If that data meets a certain criteria, I set the rowspan attribute on my td element to "2". The problem is when I do that a <td> gets pushed to the outside of the table. Here is my js so you can get an idea of what I'm doing. The most important part of this starts at the for loop
function createAppointments() {
//clear the dom with the clearTags() function so appointments don't overlap
clearTags();
//get all of the appointments that are related to the current day. Create a date variable equal to the datepicker value
let myDate = document.getElementById('myDate');
let day = myDate.value;
console.log(day);
//update the h1 element to display the current date
document.getElementById('date').innerText = day;
//use day in a doquery to query appts where fid 14(appointment date) is equal to the datepicker value
let appts = qdb.DoQueryWithQueryString(apptsDBID,"{'14'.'EX'.'"+ day + "'}","3.6.18.17.11.37.39.41.42.43.44")//6-appt time/18-service/17-patient/11-trainer/37-element id/39-duration number/41-hex code/42 - notes/43 - top/ 44- left
let records = qdb.selectNodes(appts,"*/table/records/record");
//now we have our xml tree of all of our appointment records
//loop through each record. The element id is a field in quickbase(37) which automatically takes the trainer name and appends a "-" and the start time of the appointment, which corresponds with the td ids.
for(var i=0;i<records.length;i++) {
debugger;
let rec = records[i];
let patient = gf(rec,17);
let service = gf(rec,18);
let notes = gf(rec,42);
let textToDisplay = `${patient}-${service}`;
let eid = gf(rec,37);
let rid = gf(rec,3);
let rspan = gf(rec,39);
let t = gf(rec,43); //top px
let l = gf(rec, 44);//left percentage
console.log(`top is ${t} and left is ${l}`);
let p = document.createElement("p");//create a new paragraph element to put in the table data
let q = document.getElementById(eid);
q.appendChild(p);//append the created paragraph element to the td for the onmouseover event
p.innerText = textToDisplay;
p.setAttribute("id",rid);
p.setAttribute("data-toppx",t);
p.setAttribute("data-leftpercent",l);
p.setAttribute("data-notes", notes);
q.style.backgroundColor = gf(rec,41);
q.style.borderRadius = "10px";
q.style.width = "225px";
p.style.fontWeight = "bold";
q.style.paddingLeft = "15px";
p.setAttribute("onmouseover","showNotes(this)");//set the show notes function as an attribute of the paragraph
p.setAttribute("onmouseleave","hideNotes()");//hide the notes div when not hovered
q.setAttribute("rowspan",gf(rec,39));}//set the row span attribute based on the rspan field in quick base
}
function showNotes(obj) {
let contents = obj.dataset.notes;
let topPX = obj.dataset.toppx;
let leftP = obj.dataset.leftpercent;
console.log(obj);
let notes = document.querySelector('#notes');
notes.style.visibility = "visible";
notes.innerHTML = contents;
console.log(topPX);
console.log(leftP);
notes.style.top = topPX;
notes.style.left = leftP;
}
function hideNotes() {
let notes = document.querySelector('#notes');
notes.style.visibility = "hidden";
}
How can I prevent <td>s from being pushed outside my table? FYI the table is built statically not dynamically.
Try adding some css to your table like setting the table-layout to fixed and for td
word-wrap to break-word
Something like this
td { word-wrap: break-word; } table { table-layout: fixed; width: 100%; }
Here is a link to my JS fiddle
jsfiddle.net/elvo6969/51uLoa7b/2
*new working link
what I'm trying to do is add a new row to my table(that has empty cells which I can write in ) calculate the average of the new row and output it to the last cell in that row.(This is challenging because the first 3 rows should be ignored, as it has Student info like name student number etc)
At the moment when creating a new row it just creates a new single empty cell
Can't seem to figure out how to add a column for the whole table aswell
Any help is greatly appreciated, also almost completely new to JS please excuse any stupidness
function appendRow() {
var tbl = document.getElementById('my-table'), // table reference
row = tbl.insertRow(tbl.rows.length), // append table row
i;
// insert table cells to the new row
for (i = 0; i < tbl.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode(text); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('class', style); // set DIV class attribute
div.setAttribute('className', style); // set DIV class attribute for IE
cell.appendChild(div); // append DIV to the table cell
}
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
}
I am building the multiple TD's in single TR of table dynamically.
Now I am looking to give some space between two TD elements data.
Could anyone tell me how to create dummy TD dynamically which gives space between two TD's.
Below are two TD's.
var td31 = document.createElement('td');
var imgShare = document.createElement("img");
imgShare.src = "xyz.jpeg";
imgShare.id = "image/"+allSharedMediaList[i][2];
imgShare.height = '15';
imgShare.width = '15';
imgShare.addEventListener("click", shareImage);
td31.appendChild(imgShare);
//I WANT TO BUILD DUMMY TD here TO GIVE SPAVE BETWEEN TWO TD'S
var td32 = document.createElement('td');
var likeCount = document.createElement("span");
likeCount.id = "likecount"+allSharedMediaList[i][2];
likeCount.name= "likecount";
likeCount.textContent = allSharedMediaList[i][3]+" Likes ";
td32.appendChild(likeCount);
I have a table, and each row is added through JavaScript. I create these rows so that when they're clicked another cell will be created beneath them where I can display additional information. Now I want to be able to destroy the row I just created when the user clicks a button etc. So essentially, I need to be able to have the row I created have an onclick attribute, but it doesn't seem to work... I've tried everything I can think of so any help would be awesome!
var table = document.getElementById("main_table");
var row = table.insertRow(1);
row.id = count;
row.onclick = function ()
{
var id = this.id;
var target = document.getElementById(id);
var newElement = document.createElement('tr');
newElement.style.height = "500px";
newElement.id = id + "" + id;
//newElement.innerHTML = text;
target.parentNode.insertBefore(newElement, target.nextSibling );
//var newRow = document.createElement("tr");
//var list = document.getElementById(id);
//list.insertAfter(newRow,list);
var newRow = table.insertRow(newID);
}
I have tried to mimic your problem with below fiddle.
http://jsfiddle.net/kr7ttdhq/12/
newElement.onclick = createClickableCells;
del.onclick = delCell;
The above code shows the snippet from the fiddle
During the onclick event of the cell. New cells are created which in turn have the same onclick events as the first cell.
Moreover, a 'close' text cell is inserted by which you can delete the entire row.
Hope this helps
I'm trying to create a table with 32 buttons.
Each button generated must have the name of a color (in turn generated for the button).
If I click on the button, placed in the table, the page background color should be with the text (color) displayed on the pressed button.
I thought about this:
var tableRef = document.getElementById('table').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.id = "row"
Can you do this?
What advice could you give me the components to be used?
I making this in Javascript code.
Advice:
Create the entire thing using Javascript.
function createTable(){
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.setAttribute('id', tableID);
var tbdy=document.createElement('tbody');
for(var i=0;i<4;i++){
var tr=document.createElement('tr');
for(var j=0;j<8;j++){
var td=document.createElement('td');
var bt = document.createElement('button');
// add button attributes
td.appendChild(bt);
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
then you create the onclick method
function changeColor(color){
var body=document.getElementsByTagName('body')[0];
body.style.bgColor = color;
}
Mind you I'm doing this from memory, if the bgcolor doesn't work then try something else