I'm developing timetable web app and I have some problem with it. When I click the button clicked row data will go to under table which I set 'selected subject' table.
And I want to make it if the subject code are already in selected subject, alert the message and prevent put data in to second table.
At first time I thought When I click the add button, make a array and put the subject Code data, and every time when I click the add button, check the array if the subject code are already in there or not.
And Here's my code.
// Add Subject Button Click Event
$('.checkBtn').click(function () {
let checkBtn = $(this);
let tr = checkBtn.parent().parent();
let td = tr.children();
let table = document.getElementById('subjectSelectBody');
let row = table.insertRow();
let subjectCode = row.insertCell(0);
let subjectName = row.insertCell(1);
let credit = row.insertCell(2);
let major = row.insertCell(3);
let day = row.insertCell(4);
let time = row.insertCell(5);
let deleteButton = row.insertCell(6);
// Get Select Tag data
let subject = td.eq(0).text();
let x = document.getElementById(subject).value;
// put data into second table (selected table)
subjectCode.innerHTML = td.eq(0).text();
subjectName.innerHTML = td.eq(1).text();
credit.innerHTML = Number(td.eq(2).text());
major.innerHTML = td.eq(3).text();
day.innerHTML = x;
time.innerHTML = td.eq(5).text();
deleteButton.innerHTML = "<button>delete</button>";
// When clicks delete button, remove the data from second table
$('button').click(function () {
$(this).parents('tr').first().remove();
});
// Create subject add Array to check overlap
let sbjCodeArr=new Array();
sbjCodeArr.push(td.eq(0).text());
console.log(sbjCodeArr);
// Total Array to deliver to server
let tdArr = [td.eq(0).text(), td.eq(1).text(), Number(td.eq(2).text()), td.eq(3).text(), x, td.eq(5).text()];
console.log(tdArr);
})
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;
}
});
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 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");
I'm trying to use the acts_as_votable gem in ruby on rails. However, I get stuck when I need to add the button to the view.
I want to add a voting system to a list of item which are put into an html table as users fill out the form in the web browser.
I can insert a 'like' button in each row for each 'destination' item. However, does this mean I need to write a 'attachLikeHandler' function to deal with what happens when the like button is clicked?
Here is the dashboard.js:
var insertDest = function(dest) {
// Find a <table> element with id="myTable":
var table = document.getElementById("destTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var name_cell = row.insertCell(0);
var address_cell = row.insertCell(1);
// var delete_cell = row.insertCell(2);
var like_cell = row.insertCell(2);
like_cell.innerHTML = '<input class="Like" type="button" value="Like" />';
var like_count_cell = row.insertCell(3);
like_count_cell.innerHTML= 0;
// Add some text to the new cells:
name_cell.innerHTML = dest.name;
address_cell.innerHTML = dest.address;
// delete_cell.innerHTML = "<div class='del'>x</div>";
addMarker(dest.address,map);
};
var insertAllDest = function(trip){
var d = trip.destinations;
for (i in d){
insertDest(d[i]);
}
};
However, does this mean I need to write a 'attachLikeHandler' function
to deal with what happens when the like button is clicked?
Yes:
$(".like").on('click', function() {
$.ajax({
method: "PUT",
url: "/photos/" + $(this).attr("id"),
success: function(msg_from_server) {
alert(msg_from_server); //"Thanks for voting!" or "Sorry, you already voted!"
}
});
});
If you have a route declared as resources :photos, then a url like /photos/12 will send a request to photos#update, then inside the update action params[:id] will be 12. Note that you'll need to add the resource id to the html when constructing the html.
I'm trying to create a button to put in the each row of a table to remove that row
the table row it self will be created by javascript on the runtime
function createrow(){
document.getElementById('totaltd').innerHTML = total;
var table = document.getElementById('baskettbl');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell2 = row.insertCell(0);
cell2.innerHTML='deleterow';
var cell2 = row.insertCell(1);
cell2.innerHTML='price';
var cell3 = row.insertCell(2);
cell3.innerHTML='name';
}
here is my removing row function
function removerow(i){
var table = document.getElementById('baskettbl');
table.deleteRow(i);
}
my problem is when i remove a row if that row is in the middle of my table it will mess up the indexing cuz i define removerow argument when i creat each row
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell2 = row.insertCell(0);
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false; />
like if i have 5 rows and and i remove row[3] i will end up with 4 rows but my last row button is still going to pass 5 to the removerow function and of course there is no row[5]
so i thought i should re index all of the rows by simply
function removerow(i){
var table = document.getElementById('baskettbl');
table.deleteRow(i);
}
var rowCount = table.rows.length;
for(i=0 , i<= rowCount ; i++){
var cell = 'cell'+i;
cell.innerHTML='<a href="" onclick="removerow('+0+'); return false; />
}
but i need to set the td id in the numeric whey so i can change their innerhtml like this
so here is my questions :
1.how can i set the attribute like id to the created td so i can get their values later? here is how i create them
var cell2 = row.insertCell(0);
2.i findout about rowIndex property which apparently returns the row index
function removerow(x)
{
alert("Row index is: " + x.rowIndex);
}
so that is going to make my job easy and i don't need to recreate all the indexes but how can i pass the clicked row 'this' to the the function ? here is how i pass the index
var cell2 = row.insertCell(0);
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); />
and also i use dreamweaver cs5 and it doesn't seems to recognize rowIndex
Then get the index dynamically and don't set it when you create it:
function createrow(){
document.getElementById('totaltd').innerHTML = total;
var table = document.getElementById('baskettbl'),
rowCount = table.rows.length,
row = table.insertRow(rowCount),
cell = row.insertCell(0),
a = document.createElement('a');
a.href = '#';
a.innerHTML = 'deleterow';
a.onclick = function() {
// `this` refers to the `a` element.
removerow(this.parentNode.parentNode.rowIndex);
return false;
};
cell.appendChild(a);
cell = row.insertCell(1);
cell.innerHTML='price';
cell = row.insertCell(2);
cell.innerHTML='name';
// still needed for IE memory leak? Don't know...
table = row = cell = a = null;
};
Setting the click event handler via JavaScript is more readable anyway (well, you could also just use this.parentNode.... in the HTML string).
The code above should do what you want (if you have questions about it, just comment). Nevertheless I wanted to answer your questions:
how can i set the attribute like id to the created td so i can get their values later?
An important thing to know is that there is a difference between HTML attributes and DOM properties. These answers describe it quite well, although it is originally about jQuery (but that does not matter).
Anyway, you already know how to set the innerHTML and you can do so similar for id:
cell.id = "something";
Have a look at the DOM element reference.
but how can i pass the clicked row 'this' to the the function
I more or less showed this in the code above. Inside the event handler, this refers to the element you bound the event to. We know that it is an a element which is a child of a td element, which itself is a child of a tr element. So to get the corresponding row, we can access this.parentNode.parentNode.
For further information regarding JavaScript, have a look at the javascript tag information page. There you will find a lot of useful links to introductions about various JavaScript related topics.
Especially have a look at the articles about event handling at quirksmode.org.
Try this I hope this helps you.
function createrow(){
document.getElementById('totaltd').innerHTML = total;
var table = document.getElementById('baskettbl');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = "row_"+rowCount;
var cell2 = row.insertCell(0);
cell2.innerHTML='deleterow';
var cell2 = row.insertCell(1);
cell2.innerHTML='price';
var cell3 = row.insertCell(2);
cell3.innerHTML='name';
}
function removerow(i){
var table = document.getElementById('baskettbl');
table.removeChild(document.getElementById("row_"+i));
}