JavaScript - Adding user input text field to a th/td element - javascript

Problem definition
I am trying to add a new feature in an old JS application. Specifically, I am trying to include a user input textbox that interacts with the other columns.
Current design
var th = document.createElement('th');
th.className = "antal";
var text = document.createTextNode("Antal");
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "Timer";
var text = document.createTextNode("Timer");
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "antal";
th.id = "digit_fast_header"
var text = document.createTextNode("Fastansatte");
th.appendChild(text);
th.style.display = "none";
row.appendChild(th);
My goal
To add 1 more column named eksInput which should contain/generate td elements with user input
EDIT
I was looking through documentation for user input on w3schools, and my attempt is the following, though it doesn't follow the design of any of the other columns, and doesn't work.
Edit 2
I tried including the following:
var th = document.createElement('th');
th.className = "input";
th.id = "input_cont";
th.innerHTML = "<input type='text' class='inpt_text' name='inpt[]' >";
row.appendChild(th);
Problem with this code is it makes the th element a user input text field, not the generated td elements.
SOLVED
My problem was solved by doing the following:
var td = document.createElement('td');
td.className = "inputTest";
td.id = "input_test"
td.innerHTML = "<input type='text' class='inpt_text' name = 'inpt[]' >";
tr.appendChild(td);

var th = document.createElement('th');
th.className = "input";
th.id = "input_cont";
th.innerHTML = "<input type='text' class='inpt_text' name='inpt[]' >";
row.appendChild(th);
i think this code will help you...

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);

Fetching user input from input field into js table that creates table cells via for loop

I've been attempting to fetch user input value from input fields to later on set it into a summary table that creates cells using javascript but can't seem to get it to work.
Following is my code:
function summonTable(f) {
var sLoc = f.countryf.value();
var eLoc = f.countryt.value();
var sDate = f.sdate.value();
var eDate = f.edate.value();
var div = document.getElementById("summary");
var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr'),
var row = document.createElement('tr');
var th = document.createElement('th');
th.textContent = sDate;
var td = document.createElement('td');
td.textContent = sLoc;
//To state which row and column this cell goes to.
row.appendChild(th);
div.appendChild(magicTable);
});
The function summonTable will take in the arguement form f that contains the input fields, I've tried basic textboxes, checkboxes, radios, but all to no avail. The variables sLoc, eLoc are basically texts for countries and sDate, eDate are supposed to be dates.
function summonTable(f) {
var sLoc = f.countryf.value();
var eLoc = f.countryt.value();
var sDate = f.sdate.value();
var eDate = f.edate.value();
var div = document.getElementById("summary");
// to get the last row of the table
var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),
var row = document.createElement('tr');
var th = document.createElement('th');
th.textContent = sDate;
var td = document.createElement('td');
td.textContent = sLoc;
//To state which row and column this cell goes to.
row.appendChild(th);
magicTable.after(row); //To add the row after the last row
div.appendChild(magicTable);
});

For 2 dynamically generated TD

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.

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