Develop Reference

inserting a django form with javascript

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 }}
`;

Accessing table calls for writing and reading

I want to insert the options in the last cell of the table. Please let me know how to access the properties of a Combobox for reading and writing.
var DeviceNames = new Array ("Dev1", "Dev2");
function addoption(select_id, text, rowcnt) {
select=document.getElementById(select_id);
var row = select.rows[rowcnt-1];
var rowObj = row.cells[4];
var option = document.createElement("option");
option.innerHTML = text;
option.value = 1;
rowObj.options.add(option);
}
function loadcombo(select_id, option_array, cnt)
{
for (var i = 0; i < option_array.length; i++)
{
addoption (select_id, option_array[i], cnt);
}
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount+1;
//Column 2
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("select");
cell5.appendChild(element5);
loadcombo(tableID, DeviceNames, rowCount);
}
<INPUT type="button" value="Add Entry" onclick="addRow('dataTable')" />
<INPUT type="button" value="Insert Entry" onclick="addRow('dataTable')" />
<INPUT type="button" name="button1" value="Delete Entery" onclick="removeRow('button1')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
I want to insert the options in the last cell of the table. Please let me know how to access the properties of a Combobox for reading and writing.

Program Design
Without a specification code can get confused, so let's assume a spec of
Click the Add button to add a table row with a row number in the first column, several input elements in following columns, and a select element in the last column
All select elements should have options for entries in the DeviceNames array.
Each option should have a value attribute taken from the index of option text in DeviceNames. The example below calculates value using a ones based index but can always be changed to suite requirements.
Changes
Select elements didn't have id's. It would be possible to give them id or name attribute based on the table row they occur in, but the code snippet below does not attempt to do so.
HTMLSelectElement elements have an add method to add options.
Element objects themselves are passed as parameters to functions which need to operate on the DOM object.
A minor change: use textContent rather than innerHTML if the content is text. While innerHTML may work, it parses text inserted as HTML markup.
Snippet
var DeviceNames = new Array ("Dev1", "Dev2");
function addoption(select, text, optionValue) {
var option = document.createElement("option");
option.textContent = text;
option.value = optionValue;
select.add(option);
}
function loadcombo(select, option_array) {
for (var i = 0; i < option_array.length; i++) {
var value = i+1;
addoption (select, option_array[i], value);
}
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
cell1.textContent = rowCount+1;
//Column 2
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var select = document.createElement("select");
cell5.appendChild(select);
loadcombo(select, DeviceNames);
}
<INPUT type="button" value="Add Entry" onclick="addRow('dataTable')" />
<INPUT type="button" value="Insert Entry" onclick="addRow('dataTable')" />
<INPUT type="button" name="button1" value="Delete Entry" onclick="removeRow('button1')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>

Managing elements of a dynamicly produced table

A button , onclick , adds a table row with three cells. In the first cell theres a textbox where you input an image url, the second cell contains a button.When pressed the button shows the image that the url refers to on the third cell.
Doing this for one row is simply, but i cant get it to work for subsequent rows because the id of each element would remain the same.
I need some tips and ideas.
Code sample:
<script>
var u = 1;
function addRows() {
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur" type="url" >';
cell2.innerHTML = '<button onclick="document.getElementById(\'im1\').src = document.getElementById(\'ur\').value;">Add Image</button>';
cell3.innerHTML = '<img id="im1" src="" alt="image">';
u++;
}
</script>
Each row generates fine and if you put in a url or the name of a local image file it will display properly on the third cell.
But it only works on the first generated row.

With this sort of thing you shouldn't be calling and duplicating ids but instead relying on Sibling properties. Nevertheless a quick hack would be to use your increment variable to give unique ids to the elements.
var u = 1;
function addRows(){
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur'+u'" type="url" >' ;
cell2.innerHTML = '<button onclick="document.getElementById(\'im'+u'\').src = document.getElementById(\'ur'+u+'\').value;">Add Image</button>' ;
cell3.innerHTML = '<img id="im'+u+'" src="" alt="image">' ;
u++;
}
</script>

This should work:
function addRow() {
var table = document.getElementById("tab");
var row = document.createElement("tr");
var buttonTd = document.createElement("td");
var button = document.createElement("button");
button.type = "button";
button.innerHTML = "Show image";
buttonTd.appendChild(button);
var textboxTd = document.createElement("td");
var textbox = document.createElement("input");
textbox.type = "text";
textboxTd.appendChild(textbox);
var imageTd = document.createElement("td");
var image = document.createElement("img");
imageTd.appendChild(image);
row.appendChild(textboxTd);
row.appendChild(buttonTd);
row.appendChild(imageTd);
button.addEventListener("mousedown", function () {
image.src = textbox.value;
});
table.appendChild(row);
}
table,tr,td {
border: 1px solid black;
border-collapse: collapse;
}
<button onclick="addRow()">Add Row</button>
<table id="tab"></table>

Pagination in a table with dynamic entries from JSON

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.

How add style of cell and change properties of <td> in adding row

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>