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.
Related
what I am trying to do is fairly simple:
I want to add {{ form }} to a table cell with javascript
this what I have but it only works for labels:
function showOrHideReconciliationTable() {
var checkBox = document.getElementById("edit-inventory-reconciliation");
if (checkBox.checked == true) {
var table = document.getElementById("main-table");
var row = table.insertRow(7);
row.classList.add("warehouse-row");
row.setAttribute('id','table-toogle');
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "{{ form }}";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
} else {
var table = document.getElementById("main-table");
var row = table.deleteRow(7);
}
any help would be appreciated (it's probably something simple or you cannot do it this way)
Thanks!
it was as simple as this (if anyone is interested):
cell1.innerHTML = `
{{ form }}
`;
I'm trying to adapt an static existing form that is inside of a table, to be dynamic in certain cases depending on "select".
What I've done is create new TR's TD's on the existing table id -> "peticionobras" and fill them using innerHtml with the new input text I need. Everything in plain javascript as follows:
//if select is...
if (value == "A" || value == "B" || value == "C"){
var tableObras = document.getElementById("peticionobras");
if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
var row = tableObras.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'> <br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);
var row = tableObras.insertRow(6);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'> <bdi id='D_Emp_con_necesidad_tag'></bdi>";
document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);
var row = tableObras.insertRow(9);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
cell1.id = "testtdtd";
cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'> <bdi id='Direccion_coordenadas_tag'></bdi>";
document.getElementById("Direccion_coordenadas").setAttribute("required", true);
}
}
The result in terms of aspect is fine, it puts what I need where it should be. But the behaviour is not correct. The new required field they don't appear as required, and once you submit the form the new inputs are not submitted
(Notice: Undefined index: D_Emp_con_necesidad in...).
The main page code is schematically as follows:
<table id="peticionobras">
<tbody>
<form action="./test.php" method="POST">
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>2</td></tr>
<tr><td>4</td><td>2</td></tr>
<tr><td>6</td><td>2</td></tr>
<tr><td>7</td><td>2</td></tr>
<tr><td>8</td><td>2</td></tr>
<tr><td>9</td><td>2</td></tr>
<tr><td>10</td><td>2</td></tr>
<tr><td><button type="submit" value="submit">Submit</button></td><td>2</td></tr>
</form>
</tbody>
</table>
I think the way I implemented it is too much straigthforward.
Any suggestion in how to add new inputs in the existing form id='obras' inside the table id='peticionobras' in the positions 5, 6 and 9 or any clue to follow, it would be highly appreciatted.
Thanks
Regards
*EDITED [as #QUENTIN explained in the following question:
Form inside a table
--A form is not allowed to be a child element of a table, tbody or tr--
<form action="./test.php" method="POST">
<table id="peticionobras">
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>2</td></tr>
<tr><td>4</td><td>2</td></tr>
<tr><td>6</td><td>2</td></tr>
<tr><td>7</td><td>2</td></tr>
<tr><td>8</td><td>2</td></tr>
<tr><td>9</td><td>2</td></tr>
<tr><td>10</td><td>2</td></tr>
</tbody>
</table>
<button type="submit" value="submit">
Submit
</button>
</form>
<script>
var value = 'A';
if (value == "A" || value == "B" || value == "C"){
var tableObras = document.getElementById("peticionobras");
if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
var row = tableObras.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'> <br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);
var row = tableObras.insertRow(6);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'> <bdi id='D_Emp_con_necesidad_tag'></bdi>";
document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);
var row = tableObras.insertRow(9);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
cell1.id = "testtdtd";
cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'> <bdi id='Direccion_coordenadas_tag'></bdi>";
document.getElementById("Direccion_coordenadas").setAttribute("required", true);
}
}
</script>
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>
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 = " ";
}
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