I have three working bits of javascript that I'm trying to combine... unsuccessfully. I'm trying to make it so when you click a button, it knows that two fields have the same entry. If not, it will make another row in a table in my HTML with the information.
document.getElementById("goRow").addEventListener("click", check)
function check () {
if (document.getElementById("firstName").value == document.getElementById("lastName").value){
prompt('First name can not be last');
}
else {
function newRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = document.getElementById("firstName").value;
cell2.innerHTML = document.getElementById("lastName").value;
cell3.innerHTML = document.getElementById("email").value;
cell4.innerHTML = " ";
}
}
Like I said, all the different parts work on their own, but I can't get them all to play nice with each other.
Why are you trying to define a function as part of an ELSE condition? You should have that on its own, and call it from the ELSE:
function check() {
if (document.getElementById("firstName").value == document.getElementById("lastName").value) {
prompt('First name can not be last');
} else {
newRow();
}
}
function newRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = document.getElementById("firstName").value;
cell2.innerHTML = document.getElementById("lastName").value;
cell3.innerHTML = document.getElementById("email").value;
cell4.innerHTML = " ";
}
window.onload() {
document.getElementById("goRow").addEventListener("click", check)
}
function check () {
if (document.getElementById("firstName").value == document.getElementById("lastName").value){
prompt('First name can not be last');
} else {
newRow();
}
}
function newRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = document.getElementById("firstName").value;
cell2.innerHTML = document.getElementById("lastName").value;
cell3.innerHTML = document.getElementById("email").value;
cell4.innerHTML = " ";
}
Related
Please help me get the user UID from firebase. How can I retrieve the user uid and show it on the table? I cannot delete it and update. Please tell me how.
function readTask(){
var UserInformation= firebase.database().ref("UserInformation/");
UserInformation.on("child_added",function(data) {
var taskValue= data.val();
function tabappend(id, name, gender, email, phone, bloodType, birthday) {
// playerlist is the ID of the table
var tab = document.getElementById('table');
var row = tab.insertRow(-1); // append to table
var id = firebase.auth().currentUser.uid;
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
cell0.innerHTML = id;
cell1.innerHTML = name;
cell2.innerHTML = gender;
cell3.innerHTML = email;
cell4.innerHTML = phone;
cell5.innerHTML = bloodType;
cell6.innerHTML = birthday;
if (ready == true) {
cell2.innerHTML = "✓";
cell2.class = "ready";
}
}
document.getElementById("table").innerHTML+=`
<tbody>
<tr>
<td>${taskValue.id}</td>
<td>${taskValue.name}</td>
<td>${taskValue.gender}</td>
<td>${taskValue.email}</td>
<td>${taskValue.phone}</td>
<td>${taskValue.bloodType}</td>
<td>${taskValue.birthday}</td>
</tr>
</tbody>
`
});
}
I am creating a page which is dynamically fetching entries from a JSON file and is displaying it in the form of table I have written the code to create the table in Java script, but it is fetching all the entries at once. I'm trying to create a pagination with only 10 entries per page and trying to create a sort. Here's the function for creating the table.
function myFunction32()
{
var table = document.getElementById("contentTable");
table.innerHTML = "";
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "Disk ID";
cell2.innerHTML = "Serial Number";
cell3.innerHTML = "Hypervisor IP";
cell4.innerHTML = "TIER";
cell5.innerHTML = "Total Capacity";
for(var i=0; disk.length;i++)
{
var row = table.insertRow(i+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = disk[i].disk_id;
cell2.innerHTML = disk[i].disk_serial_id;
cell3.innerHTML = disk[i].hypervisor_ip;
cell4.innerHTML = disk[i].storage_tier;
cell5.innerHTML = disk[i].disk_size +" GiB";
}
I have updated the code to include 10 entries per page, but I am not able to create a new button for next page along with sorting.
I am calling my table in the HTML as follows
<div id="fatal" style="margin-left:20px;margin-right:10px;">
<table id = "contentTable" class="table table-bordered"></table>
</div>
Thanks for any help.
I had this same problem and I solved using jQuery datatable, take a look on my gist https://gist.github.com/dptole/08f090b3cbe00e8ba937. You gonna have to edit and apply to your scenario.
From line 65 to 67 I have a wrapper to return the API endpoint string, without actually requesting it.
I want to add row and change the style of it. I use javascript to add cell and row, but I can't change style the of cell and can't change the property of new row.
Any one please suggest to change it. Let my script is
var table = document.getElementById("dataTable");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
You can set the height and color like this :
document.getElementById('dataTable').style.backgroundColor="#FFFFFF";
document.getElementById('dataTable').style.height="50";
document.getElementById('dataTable').style.textAlign="center";
Use element.style.property='value' to set the style of the element.
If there are multiple css properties to be assigned then use classes(.className) over .style.propertyName
Try this:
var table = document.getElementById("dataTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
cell1.className = 'yourClass';
cell2.className = 'yourClass';
cell3.className = 'yourClass';
cell4.className = 'yourClass';
.yourClass {
height: 50px;
text-align: center;
background-color: #FFFFFF
}
<table id='dataTable'>
<table>
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chk[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = arrSchmCode[1];
rowCount = rowCount + 1;
i want to sort the table based on the value of cell2.
I am trying to add several buttons to a table using javascript, however I keep being offered this result with [objectHTMLInputElement]
Here is my code:
function createDiseaseTable(country){
var displayCountry = document.getElementById("countrySelected");
displayCountry.innerHTML = country.name;
var diseaseTable = document.getElementById("diseases");
diseaseTable.innerHTML = "";
for (var i = 0; i<country.diseases.length; i++) ////////////////////////////////////
{
var changeDisease = document.createElement('input');
changeDisease.type = 'button';
changeDisease.name = "x"
changeDisease.onclick = hi();
var row = diseaseTable.insertRow(i);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
var cell4 = row.insertCell(3)
var cell5 = row.insertCell(4);
cell1.innerHTML = OurDiseases[i].name;
cell2.innerHTML = OurDiseases[i].cureLevel;
cell3.innerHTML = OurDiseases[i].killLevel;
cell4.innerHTML = OurDiseases[i].cured;
cell5.innerHTML = changeDisease;
console.log(changeDisease);
}
var row = diseaseTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "Disease";
cell2.innerHTML = "Level needed to cure";
cell3.innerHTML = "Deaths each year";
cell4.innerHTML = "Cured";
cell5.innerHTML = "More Info";
}
Note: I'm not concerned about not running a function yet upon click, i just want the actual button to appear
you need to use the appendChild function
your code could than look like this:
...
cell5.appendChild(changeDisease);
...
You can find more details on this function here: http://www.w3schools.com/jsref/met_node_appendchild.asp
Update - see comment:
name is an attribute of an element and not the caption of the button, if you want to set the caption use the attribute value instead - here is an example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button
It's been a long time since I've done DOM manipulation without jQuery, but I believe you need to do cell5.appendChild(changeDiseas) rather than .innerHTML (which is expecting an HTML string).
http://www.w3schools.com/jsref/met_node_appendchild.asp