For 2 dynamically generated TD - javascript

Right now the following code generates two much white spaces between the two TDs.
How to set the first TD left aligned and
the second TD left aligned to the first TD?
// nTR being the newly TR
nTR.setAttribute('style','td {padding: 10px}') has no effect. How to go about it?
// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.setAttribute('style','td {padding: 10px}');
// cell 1
var cell = document.createElement("td");
cell.colSpan = "2";
// cell.setAttribute('style','padding: 10px');
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fLabel';
cellText.name = 'fLabel';
cellText.size = "20";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 2
var cell = document.createElement("td");
cell.colSpan = "3";
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fValue';
cellText.name = 'fValue';
cellText.size = "80";
cell.appendChild(cellText);
newrow.appendChild(cell);
// code to append the new TR to table
// ...
Thanks.

Related

HTML table element is not working with their attribute

I'm trying to make contents DOM by Javascript.
so I created elements and appended to DOM.
Howerver, attribute is not applying to Table like border.
I could just see text.
also I tried to change attirube after appending. but not working
var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style',"width:160px;text-align:center;padding:5px");
var h3 = document.createElement("h3");
var text = document.createTextNode("Hello");
h3.appendChild(text);
iwContent.appendChild(h3);
var table = document.createElement("table");
table.border = '1';
table.style.textAlign = "center";
//table.setAttribute('border', '1');
//table.setAttribute('style',"border-collapse:collapse; text-align: center;");
let thead = table.createTHead();
let row = thead.insertRow();
var th = document.createElement("td");
var text1 = document.createTextNode("name");
var text2 = document.createTextNode("manhole1");
th.appendChild(text1);
th.appendChild(text2);
row.appendChild(th);
iwContent.appendChild(row);
#Jaeseo Lee you have applied "border-collapse:collapse;" this style to your table because of this your border is disappear, you have to remove this from code.
I've tried this code and works fine.
var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style',"width:160px;text-align:center;padding:5px");
var h3 = document.createElement("h3");
var text = document.createTextNode("Hello");
h3.appendChild(text);
iwContent.appendChild(h3);
var table = document.createElement("table");
//table.border = '1'; //this is also working
table.width='50%';
table.height='50%';
table.style.textAlign = "center";
//table.setAttribute('border', '1'); //this is also working
table.setAttribute('style','border:1px solid blue; text-align:center;');
let thead = table.createTHead();
let row = thead.insertRow();
var th = document.createElement("th");
var text1 = document.createTextNode("name");
var text2 = document.createTextNode("manhole1");
th.appendChild(text1);
th.appendChild(text2);
row.appendChild(th);
iwContent.appendChild(row);

Get selected row value using javascript

I have dynamically add the table on html button click. Add the teamname,teamid,radio button.
HTML attributes:
<input type="button" value="Generate a table." onclick="generate_table()">
Javascript function :
function generate_table()
{
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var teamrecord = "test";
for (var i = 0; i < teamrecord.length; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var cellText = document.createTextNode("teamrecord");
var cellId = document.createTextNode("teamid");
var radio = document.createElement("INPUT");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "radio");
cell.appendChild(cellText);
cell1.appendChild(cellId);
cell2.appendChild(radio);
row.appendChild(cell);
row.appendChild(cell1);
row.appendChild(cell2);
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
}
4 rows with 3 columns will generate on the button click , Now i need to get the details on the radio button click.
If i select the radio button from the first row i need to show the teamid in alert box? how can I achieve this in javascript?
try this code below should alert teamid cell's innerText
<input type="button" value="Generate a table." onclick="generate_table()">
function generate_table()
{
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var teamrecord = "test";
for (var i = 0; i < teamrecord.length; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var cellText = document.createTextNode("teamrecord");
var cellId = document.createTextNode("teamid");
var radio = document.createElement("INPUT");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "radio");
//here we set value of radio button based on element index and we set a classname for teamid cell
radio.setAttribute("value", i);
cell1.setAttribute("class", "selected_teamid");
//here we add click event
radio.setAttribute("onclick", "getteamid("+i+")");
cell.appendChild(cellText);
cell1.appendChild(cellId);
cell2.appendChild(radio);
row.appendChild(cell);
row.appendChild(cell1);
row.appendChild(cell2);
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
}
function getteamid(i){
alert(document.getElementsByClassName("selected_teamid")[i].innerText);
}
<input type="button" value="Generate a table." onclick="generate_table()">
just add this line, before appending the radio element:
radio.onclick = function(){alert(this.value};
You just need to add an event handler to the radio button when you create it:
...
radio.addEventListener('click', radioButtonClick, false);
...
function radioButtonClick() {
alert(this.getAttribute('value'));
}
This requires that you set the value of the radio button to your team id, or store it on the radio button (which will be the this inside the event handler) in some other way.
You aren't passing a teamid anywhere, so I assumed the teamid is the index of the looped array.
var generate_table = function()
{
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var teamrecord = "test";
for (var i = 0; i < teamrecord.length; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var cellText = document.createTextNode("teamrecord");
var cellId = document.createTextNode("teamid");
var radio = document.createElement("INPUT");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "radio");
radio.setAttribute('data-team', i); // passing the team id
cell.appendChild(cellText);
cell1.appendChild(cellId);
cell2.appendChild(radio);
row.appendChild(cell);
row.appendChild(cell1);
row.appendChild(cell2);
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
}
// add an event listener on a dynamic element, and alert the team id
document.addEventListener('click', function(e) {
if(e.target && e.target.hasAttribute('data-team')) {
alert(e.target.getAttribute('data-team'));
}
});
You have several way to achieve that:
The easiest way I think is to add an attribute 'teamid' to the radio button. Then just listen for click event and get this value back.
radio.setAttribute('teamid', teamid);
radio.addEventListener('click', onRadioClick);
function onRadioClick(domEvent){
console.log(domEvent.target.getAttribute('teamid'));
}
For me it is not the best way because you need to put some information in the DOM... In my opinion, it would be better to separate the presentation and the data :
var tableData = [
{teamId: 'someId0', title:'title0', someData:'...' },
{teamId: 'someId1', title:'title1', someData:'...' },
{teamId: 'someId2', title:'title2', someData:'...' }
];
for (var i = 0, n = tableData.length ; i < n ; i++){
var rowData = tableData[i];
// Create the row using rowData
// ...
radio.setAttribute('teamid', rowData.teamId);
radio.addEventListener('click', onRadioClick.bind(rowData));
// ...
}
function onRadioClick(domEvent){
// Here this represent data of the row clicked
console.log(this.teamId);
}
I think it's easier to manage because every data are JS side... You don't store any data in the DOM... However both works ;) Hope it helps
radio.setAttribute("onclick", "anotherFunction(this)")
and after this function create anotherFunction():
function anotherFunction(object){
alert(object.parentNode.parentNode.firstChild.innerHTML);
}

How to create the given html format using Javascript dom?

I have to get the data printed like the below format using document object model. I am having the problem in creating the below html.
name1 name2 name3
50 48 56
name4 name5 name6
52 58 49
example using below format:
var table = document.createElement("table");
var row = document.createElement("row");
Create a element
var table = document.createElement("table");
Create an empty element and add it to the 1st position of the table:
var row = table.insertRow(0);
Insert new cells ( elements) at the 1st and 2nd position of the "new" element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
See reference
Use tr instead of row
var row0 = document.createElement("tr");
Here is a quick start for what you want to do:
var table = document.createElement("table");
var row0 = document.createElement("tr");
var a0 = document.createElement("td");
a0.textContent = "name1";
var a1 = document.createElement("td");
a1.textContent = "name2";
var a2 = document.createElement("td");
a2.textContent = "name3";
var row1 = document.createElement("tr");
var b0 = document.createElement("td");
b0.textContent = "50";
var b1 = document.createElement("td");
b1.textContent = "48";
var b2 = document.createElement("td");
b2.textContent = "56";
row0.appendChild(a0);
row0.appendChild(a1);
row0.appendChild(a2);
row1.appendChild(b0);
row1.appendChild(b1);
row1.appendChild(b2);
table.appendChild(row0);
table.appendChild(row1);
document.body.appendChild(table);
We can use insertRow function of table to create new row.
find the below code:
var table = document.createElement("table");
//to create first row
var row = table.insertRow(0);
// first row columns
var col = row.insertCell(0);
col.textContent = "name1";
col = row.insertCell(1);
col.textContent = "name2";
col = row.insertCell(2);
col.textContent = "name3";
// for second row
row = table.insertRow(1);
// for second row columns
col = row.insertCell(0);
col.textContent = "50";
col = row.insertCell(1);
col.textContent = "48";
col = row.insertCell(2);
col.textContent = "56";
document.body.appendChild(table);
jsfiddle
If you have your data stored in an object you can do this programmatically:
var data = {
name1: 50,
name2: 48,
name3: 56,
name4: 52,
name5: 58,
name6: 49
};
function buildTable(data) {
// grab the headings from the object
var headings = Object.keys(data);
var cells = [], rows = [];
// for each heading, push it and its data value into the cell array
headings.forEach(function (heading, i) {
var value = data[headings[i]];
cells.push('<td>' + heading + '<br/>' + value + '</td>');
// when we reach the end of the row, brace the cell data with
// row tags, and clear the cells array
if ((i + 1) % 3 === 0) {
rows = rows.concat('<tr>' + cells.join('') + '</tr>');
cells = [];
}
});
// return the complete table html
return '<table>' + rows.join('') + '</table>'
}
// grab the body tag and insert the table html as the first child
var body = document.querySelector('body');
body.insertAdjacentHTML('afterbegin', buildTable(data));
DEMO

Bootstrap Table not appearing correctly

I am using JavaScript to loop through some data and build a number of tables and am using Bootstrap with the class table table-hover. This works absolutely fine on all tables except the very last table to be produced. The bottom table is always sqashed and the hover over doesn't work. The columns resize to the correct size but that's about it.
I can't work it out, both tables have the class declared:
No matter how many tables are made it always happens on the very last table. I should point out that I've tried everything I can think of including adding a dummy table within the loop and the last interation but then that makes two squashed tables then.
Update: http://jsfiddle.net/si828/1ksyces5/8/
Code:
$('#tableContainer').empty();
var div = document.getElementById('tableContainer');
for (var i = 0; i < data.length; i++)
{
div.innerHTML = div.innerHTML;
var para = document.createElement("p");
var logo = document.createElement("a");
logo.setAttribute('class', 'glyphicon glyphicon-user');
para.appendChild(logo);
var node = document.createTextNode(" " + data[i].userName + " (" + data[i].userID + ") " );
para.appendChild(node);
var aTag = document.createElement("a");
aTag.setAttribute('data-id-proxy' , data[i].userID);
aTag.setAttribute('class' , 'open-AddUserModal');
aTag.setAttribute('href' ,'#addUserModal');
var span = document.createElement("span");
span.setAttribute('class', 'glyphicon glyphicon-plus');
aTag.appendChild(span);
para.appendChild(node);
para.appendChild(aTag);
para.setAttribute('class', 'text-primary');
div.appendChild(para);
var table = document.createElement('table'), tr, td, row, cell;
table.setAttribute('class', 'table table-hover');
table.setAttribute('id', 'table' + data[i].userID);
table.setAttribute('border', '1');
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
cell.setAttribute('style' , 'width: 20%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "SRM";
var cell = row.insertCell(1);
cell.setAttribute('style' , 'width: 13%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "Target User";
var cell = row.insertCell(2);
cell.setAttribute('style' , 'width: 20%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "Target User Name";
for (row = 0; row < data[i].targetUsers.length; row++)
{
tr = document.createElement('tr');
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].srm;
table.appendChild(tr);
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].targetUser;
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].targetUserName;
}
document.getElementById('tableContainer').appendChild(table);
}
Based on your JSFiddle, your div.innerHTML = div.innerHTML; on line 10 should be the last statement of your outer for loop (on line 76). Otherwise your table doesn't get a <tbody>, causing bootstrap to malfunction.
Here is the fixed one: http://jsfiddle.net/wsLzk5wq/
If it is only the last table you could add custom css for the last table element by using a child selector.
E.g
HTML:
<div class="parent-container">
<table>
.......
</table>
</div>
CSS:
.parent-container table:last-child {
padding: 10px !important;
.......
}

How to delete the table row on button click

var del = document.createElement('input');
del.type = 'button';
del.name = 'delll';
del.value = 'del';
del.onclick = function(){ };
var table = document.getElementById("myTableData");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width='175';
td.appendChild(el);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(objLabel);
td.appendChild(objLabel2);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(el_s);
td.appendChild(el_sm);
td.appendChild(el_sy);
tr.appendChild(td);
**var td = document.createElement('TD');
td.width='20';
td.appendChild(del);
tr.appendChild(td);**
myTableData.appendChild(table);
In the above code I have created a table dynamically and added NAME field GENDER field and DATE OF BIRTH field and DELETE BUTTON.
The code works like this: first the user has to enter details in NAME GENDER AND DOB, if the DELETE button is clicked then the columns containing fields are deleted from the table.
I have to insert the code for deletion here:
del.onclick = function(){ };
Try this:
del.onclick = function(){
var tr = document.createElement('TR');
tr.parentElement.removeChild(tr);
};

Categories