I have a website in wich users input text into a textarea.
This text is saved into a database table and is later shown in a div element
Sometimes a user paste data from excel into the textarea, i wish to retain the table layout from excel after i pull it from the database and present it on my webpage
Example:
test cat1 cat2
data1 1 2
data2 3 5
data3 6 5
Is it possible (probably with js) that on loading the page a code checks if a tab-sign is in the data? And if yes.. format that data as a html table?
TRY As below. Just giving you idea.
var body = document.getElementsByTagName('body')[0];
var text = document.getElementByID("txtareaID").value;
var isTab = text.indexOf("\t");
if(isTab != '-1')
{
var tableCell = text.split("\t");
var table = document.createElement('table');
var tbdy = document.createElement('tbody');
var tr = document.createElement('tr');
for (var i = 0; i < tableCell.length ; i++) {
var td = document.createElement('td');
td.innerText = tableCell[i];
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
}
You can check for tab characters using \t to see if the character exists in the string. Something like this
var text = "test cat1 cat2 data1 1 2 data2 3 5 data3 6 5";
var tabsFound = text.indexOf("\t");
Related
I have created a dynamic table in html click here to view image the rows are created dynamically in javascript please refer the image click here to view image the data for table is fetched from firebase.
The problem I am facing is that the rows are getting added at the end of the table repeatedly resulting in duplicate rows please refer the image click here to view image how do I remove old rows and add new updated rows using javascript.
I have updated the snapshot.forEach loop with comments.
snapshot.forEach(function (data) {
var val = data.val();
var trow = document.createElement('tr');
var tdata = document.createElement('td');
var tdata1 = document.createElement('td');
tdata.innerHTML = val.Name;
tdata1.innerHTML = val.Votes;
trow.appendChild(tdata);
trow.appendChild(tdata1);
// set the Name as data-id attribute
// which can be used to query the existing row
tdata.setAttribute('data-id', val.Name);
// append the trow to tbdy
// only if there's no row with data-id value of val.Name
// otherwise update the vote column of the existing row
var existingRow = tbdy.querySelector('[data-id="' + val.Name + '"]');
if (!existingRow) {
tbdy.appendChild(trow);
} else {
existingRow.querySelectorAll("td")[1].innerHTML = val.Votes;
}
});
I have a established a websocket connection and I can view the live data in json format on the console, But I can't seem to populate that data in a HTML. I'm trying to pull that data and populate it in a HTML Table format. M fairly new to websockets and json data.
Not sure if I should 1st store the data locally and then redistribute it to a HTML table or just Distribute it Live in HTML table. Please assist in pulling from console to a HTML table.
Js Code:
stomp.connect(headers, function(cb) {
var json = '{"name":true,"Id":true}',
obj = JSON.parse(json);
var topic = stomp.subscribe('/destination', function(e) {
createTable(json);
}, headers);
});
//Data Conversion
function createTable(response){
var tbl = document.getElementById("tableDiv");
var tblBody = document.createElement("tbody");
var header = tbl.createTHead();
var headerRow = header.insertRow(0);
var headerCell = document.createElement("th");
headerCell.innerHTML = "Name";
headerRow.appendChild(headerCell);
var headerCell2 = document.createElement("th");
headerCell2.innerHTML = "Id";
headerRow.appendChild(headerCell2);
JSON.parse(response).fields.forEach(function(field){
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell2 = document.createElement("td");
cell.innerHTML = field.name;
cell2.innerHTML = field.Id;
row.appendChild(cell);
row.appendChild(cell2);
tblBody.appendChild(row);
});
tbl.appendChild(tblBody);
}
HTML Div
<table id="tableDiv"></table>
Please Assist and Thank you very much in Advance. I'm using Notepad++ as my IDE.
I'm currently learning JS and working on creating a HTML invoice. I want to take values from three textareas that are entered and then add them to the end of my table (The total is calculated automatically whose function is working fine). Currently I've added blank fields using
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
But I do not know how to get the three values I enter getting added to the table when I click on add
Image of table with empty fields added
You need to get the value from the inputs and then concatenate them in your append.
Try this:
$("#addrow").click(function(){
var itemName = $('#add-description').val();
var itemHours = $('#add-hours').val();
var itemRate = $('#add-rate').val();
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea id="new-description">'+itemName+'</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><textarea class="cost">'+itemHours+'</textarea></td><td><textarea class="qty">'+itemRate+'</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();});
Example: CodePen
You can use below code to get the text from text area. Get all three text from text boxes and append into the td of the table
Text area :
var bla = $('textarea:input[name=txt_area]').val();
Text Box :
var bla = $('#txt_name').val();
You can use this code for your requirement
**var taskdescription = document.getElementById('taskdescription').value;
var hours = document.getElementById('hours').value;
var rate = document.getElementById('rate').value;
var amount = document.getElementById('amount').value;
var table = document.getElementById('table');
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode(taskdescription);
td.appendChild(txt);
var td1 = document.createElement("td");
var txt1 = document.createTextNode(hours);
td1.appendChild(txt1);
var td2 = document.createElement("td");
var txt2 = document.createTextNode(rate);
td2.appendChild(txt2);
var td3 = document.createElement("td");
var txt3 = document.createTextNode(amount);
td3.appendChild(txt3);
tr.appendChild(td);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);**
this will automaticlly append your data into table
Can someone please shine some light on my this error is tossed? outputTable is properly referenced, and my JS file with the array countries is properly formatted.
I reckon I am appending erroneously, but I have tried all that I can.
PS if youre going to downvote, at least please tell me how to improve my questions in the future. I couldnt find a different question that exists already that matches my issue.
window.onload = generateTable();
function generateTable() {
// get the reference for the body
var outputTable = document.getElementById('outputTable');
// revoke existing Body element
if (outputTable) {
outputTable.removeChild(outputTable);
}
// creates a <tbody> element
var tableBody = document.createElement('tbody');
// creating all table rows
for (var i = 0; i < countries.length; i++) {
// creates a table row
var row = document.createElement('tr');
// create table column for flag
var colFlag = document.createElement('td');
//create image element in flag column
var flag = document.createElement('img');
flag.src = 'flags/' + countries[i].Code.toLowerCase() + '.png';
flag.alt = countries[i].Code;
row.appendChild(colFlag);
//append flag to flag column
colFlag.appendChild(flag);
// create table column for Code
var colCode = document.createElement('td');
//append code to code column
colCode.appendChild(document.createTextNode(countries[i].Code));
row.appendChild(colCode);
// create table column for country //**ENGLISH */
var colCountry = document.createElement('td');
colCountry.appendChild(document.createTextNode(countries[i].Name.English));
row.appendChild(colCountry);
// create table column for continent
var colCont = document.createElement('td');
colCont.appendChild(document.createTextNode(countries[i].Continent));
row.appendChild(colCont);
// create table column for area
var colArea = document.createElement('td');
colArea.appendChild(document.createTextNode(countries[i].AreaInKm2));
row.appendChild(colArea);
// create table column for population
var colPop = document.createElement('td');
colPop.appendChild(document.createTextNode(countries[i].Population));
row.appendChild(colPop);
// create table column for capital of country
var colCap = document.createElement('td');
colCap.appendChild(document.createTextNode(countries[i].Capital));
row.appendChild(colCap);
// attach columns to row
tableBody.appendChild(row);
outputTable.appendChild(tableBody);
}
// add the row to the end of the table body
document.body.appendChild(outputTable);
}
I'm trying to loop through XML nodes containing information about users to create an HTML table on my website.
This is what the XML looks like:
<websites_name>
<user>...</user>
<user>...</user>
.
.
.
</websites_name>
And this is the code I'm trying to parse it with:
for(var user in xmlhttp.getElementsByTagName('user')){ //fix this row to me
//Create a new row for tbody
var tr = document.createElement('tr');
document.getElementById('tbody').appendChild(tr);
}
UPDATE
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","some URL",true);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var root = xmlDoc.getElementsByTagName('websites_name');
for(var i=0, i<root[0].childNodes.length,i++){
//Create a new row for tbody
var tr = document.createElement('tr');
document.getElementById('tbody').appendChild(tr);
}
One of the least intuitive things about parsing XML in JavaScript is that the text inside the element tags is actually a node you have to traverse into.
Assuming it's <user>text data</user>, you not only have to traverse into the text node of the user element to extract your text data, but you have to create a text node with that data in the DOM to see it. See nodeValue and and createtextnode:
// get XML
var xml = xhr.responseXML;
// get users
var users = xml.getElementsByTagName("user");
for (var i = 0; i < users.length; i++) {
var user = users[i].firstChild.nodeValue;
var tr = document.createElement("tr");
var td = document.createElement("td");
var textNode = document.createTextNode(user);
td.appendChild(textNode);
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);
}