Develop Reference

Function JavaScript to add row in a table

I have this function to add a row in a table and I need a drop-down list in the first cell with value that are on database. I tried with this:
td1.innerHTML = "#Html.DropDownList("SubTipologia", lista)";
But does not work. Can you help me?
Below there is the he function:
function aggiungiRiga(my_table) {
var tbody = document.getElementById(my_table).getElementsByTagName("tbody")[0];
var colonne = document.getElementById(my_table).getElementsByTagName('th');
var row = document.createElement('tr');
var td1 = document.createElement("td");
td1.innerHTML = "<div>#Html.DropDownList("SubTipologia", lista)</div>";
var td2 = document.createElement("td");
td2.contentEditable = true;
td2.innerHTML = "<input type=text placeholder='Volume'>";
var td3 = document.createElement("td");
td3.contentEditable = true;
td3.innerHTML = "<input type = text placeholder = 'Volume al m&sup3'>";
var td4 = document.createElement("td");
td4.contentEditable = true;
td4.innerHTML = "<input type=text placeholder='Valore Totale'>";
var td5 = document.createElement("td");
td5.innerHTML = "<button type=button class='btn btn -default btn - sm'><span class='glyphicon glyphicon-trash'></span></button >";
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
}

As I can see, you try to run server-side code on client (browser).
Browser doesn't khow about Razor or Html helper. So you need to use HTML instead of #Html.DropDownList("SubTipologia", lista) like this:
td1.innerHTML = "<div><select id='SubTipologia'></select></div>";
And then you can add items to <select> e.g. like here.

websql add button to insert new values in table

I am a newbie and i need help, it is to complex for me.
Sorry for my bad englisch.
I have this cool Code from #rushi and now i need a button to insert and to update a change and send it back into the table.
On the page it looks nice, there is a button on the end of the table-view and the input type = text has the right value from the table connect (see picture)!
The original code block from rushi u find here -> web-sql, javascript, show all tables of database
This is the code in the moment.
Can u help me to find the solution for the "update-button"?
function processResultSet(tblname,results) {
console.log('----------------------'+tblname)
var len = results.rows.length;
var tbl = document.createElement('table');
var trTblName = document.createElement('tr');
var thTblName = document.createElement('th');
thTblName.innerHTML = tblname;
trTblName.colSpan = 2;
trTblName.appendChild(thTblName);
tbl.appendChild(trTblName);
//create Table-Head
var trHeader = document.createElement('tr');
var th1 = document.createElement('th');
th1.innerHTML = '<font color=orange> ID STEMPEL</font>';
var th2 = document.createElement('th');
th2.innerHTML = '<font color=red> HERSTELLER </font>';
var th3 = document.createElement('th');
th3.innerHTML = '<font color=green> STÜCKZAHL </font>';
var th4 = document.createElement('th');
th4.innerHTML = '<font color=blue> KALIBER </font>';
trHeader.appendChild(th1);
trHeader.appendChild(th2);
trHeader.appendChild(th3);
trHeader.appendChild(th4);
tbl.appendChild(trHeader);
//create Table-Inserts, show what is in the table
for (var i = 0; i < len; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = results.rows[i].id;
var td2 = document.createElement('td');
td2.innerHTML = results.rows[i].hersteller;
var td3 = document.createElement('td');
td3.innerHTML = '<form method="GET" action="edit_munition.html"><input name="formstueckzahl" type="text" value="' + results.rows[i].stueckzahl + '" size="5" maxlength="4" id="' + results.rows[i].id + '">';
var td4 = document.createElement('td');
td4.innerHTML = results.rows[i].kaliber;
var td5 = document.createElement('td');
td5.innerHTML = '<input type="submit" name="form" value="update"></form>';
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbl.appendChild(tr);
}
var body = document.getElementsByTagName('X')[0];
body.appendChild(tbl);
body.appendChild(document.createElement('hr'));
}

Solution:
td3.innerHTML = '<form method="GET" action="edit_munition.html"><input name="formstueckzahl" type="text" value="' + results.rows[i].stueckzahl + '" size="5" maxlength="4" id="formstueckzahl"><input type="hidden" name="formid" value="' + results.rows[i].id + '">' + " " + '<input type="submit" name="form" value="update"></form>';

Trying to create td with rowspan

I'm trying to create a td with rowspan.
I have to create a table with 6 columns from the second column the user has to set the rowspan .
For example:
column 2 row1 column3 row1
column 2 row2 column3 row1
column 2 row3 column3 row1
function addRow() {
var myName = document.getElementById("namez");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= '<input type="text" name="txtbox1[]" />';
row.insertCell(2).innerHTML= '<input type="text" name="txtbox2[]" />';
var td3 = row.insertCell(3).innerHTML= '<input type="text" name="txtbox3" />';
td3.setAttribute('rowSpan', '2');

insertCell will return cell element. In your case td3 will be '<input type="text" name="txtbox3" />' and you can not use setAttribute over string
var td3 = row.insertCell(3);
td3.innerHTML = '<input type="text" name="txtbox3" />';
td3.setAttribute('rowSpan', '2');

How to append a row to html table using DOM?

I'm trying to add a row to a HTML table in pure JS as follows,
var tbody = document.getElementsByClassName('table1_out').getElementsByTagName("TBODY");
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<?php echo $addNewCurrencyPOST["id"] ?>";
td1.innerHTML = strHtml1;
var td2 = document.createElement("TD")
var strHtml2 = "<div class='led on'></div>";
td2.innerHTML = strHtml2;
var td3 = document.createElement("TD")
var strHtml3 = "<?php echo $addNewCurrencyPOST["symbol"] ?>";
td3.innerHTML = strHtml3;
var td4 = document.createElement("TD")
var strHtml4 = "<?php echo $addNewCurrencyPOST["symbolhtml"] ?>";
td4.innerHTML = strHtml4;
var td5 = document.createElement("TD")
var strHtml5 = "<?php echo $addNewCurrencyPOST["usdrate"] ?>";
td5.innerHTML = strHtml5;
var td6 = document.createElement("TD")
var strHtml6 = "<?php echo $addNewCurrencyPOST["eurrate"] ?>";
td6.innerHTML = strHtml6;
var td7 = document.createElement("TD")
var strHtml7 = '';
td7.innerHTML = strHtml7;
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
// append row to table
tbody.appendChild(row);
And this is the structure of the table,
<div class="table1_out">
<table>
<thead>
<tr>
<th>Id</th>
<th>Status</th>
<th>Symbol</th>
<th>Symbol html</th>
<th>Exchange rate EUR</th>
<th>Exchange rate USD</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>EUR</td>
<td><div class="led on"></div></td>
<td>€</td>
<td>&euro;</td>
<td>1</td>
<td>1.319810</td>
<td><input type="button" value="Edit" onclick="document.location.href='/backoffice_dev.php/currency/edit/EUR';"></td>
</tr> </tbody>
</table>
</div>
But it is throwing the error:
TypeError: tbody.appendChild is not a function

That's because your tbody is actually an array-like object, as in [<tbody>]:
var tbody = (...).getElementsByTagName("TBODY");
You're using "get Elements", which returns a node list. Take the first of those:
var tbody = (...).getElementsByTagName("TBODY")[0];

The var tbody = document.getElementsByClassName('table1_out').getElementsByTagName("TBODY");
reference a node list.
You need to do like this:
var tbody = document.getElementsByClassName('table1_out').getElementsByTagName("TBODY")[0];

accessing values of dynamic table row using javascript

i am writing a js code for creating a dynamic table with 3 columns per row viz.
textbox1 | textbox2 | textbox3
textbox1 | textbox2 | textbox3
..
what i'm trying to do is take values of textbox1 and textbox2 and show the multiplication result of these values in textbox 3.
but my script ain't working..
Kindly suggest the remedy or a better way to do this ...
code :
function addRowToTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f1' + iteration);
el.setAttribute('size', '22');
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f2' + iteration);
el.setAttribute('size', '20');
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f3' + iteration);
el.setAttribute('size', '20');
cellRight.appendChild(el);
}
function removeRowFromTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function store3() {
var tbl = document.getElementById('tblSample');
var rowIterator = tbl.rows.length;
var z = document.getElementById("f3");
z.value = (document.getElementById("f1").value) * (document.getElementById("f2").value) * 1;
}
Form goes like this:
<form action="tableaddrow_nw.html" method="get">
<input type="button" value="Add Position" onclick="addRowToTable();" />
<input type="button" value="Remove Position" onclick="removeRowFromTable();" />
<table border="1" id="tblSample">
<tr>
<td><input type="text" name="f1" id="f1" size="20" onkeyup="store3()"/></td>
<td><input type="text" name="f2" id="f2" size="20" onkeyup="store3()"/></td>
<td><input type="text" name="f3" id="f3" size="20" /></td>
</tr>
</table>
</form>

I modified your code, it should multiply when you add new rows,
Here is the Working Demo
HTML
<form action="tableaddrow_nw.html" method="get">
<input type="button" value="Add Position" onclick="addRowToTable();" />
<input type="button" value="Remove Position" onclick="removeRowFromTable();" />
<table border="1" id="tblSample">
<tr>
<td><input type="text" name="f1" id="f1" size="20" onkeyup="store3('f1','f2', 'f3')"/></td>
<td><input type="text" name="f2" id="f2" size="20" onkeyup="store3('f1','f2', 'f3')"/></td>
<td><input type="text" name="f3" id="f3" size="20" /></td>
</tr>
</table>
SCRIPT:
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f1' + iteration);
el.setAttribute('size', '22');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f2' + iteration);
el.setAttribute('size', '20');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f3' + iteration);
el.setAttribute('size', '20');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function store3(t1, t2, t3)
{
var tbl = document.getElementById('tblSample');
var rowIterator = tbl.rows.length;
var z=document.getElementById(t3);
z.value=(document.getElementById(t1).value)*(document.getElementById(t2).value)*1;
}

Your JavaScript code refers to hard-coded element ids, so it will NEVER work with any other ids as it is.
I suggest you use the same naming convention for your existing row(s) as for the ones that you create in your script. Also give an id to each of the rows and pass that id to your store3() function [you should really call it something like calculateSum() or something similar, it is always better to have meaningful names] - then you can work out dynamic ids for each of the fields from the id passed to the function.