Function JavaScript to add row in a table

Function JavaScript to add row in a table - javascript

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.

Related

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>';

Script doesn't work after adding row dynamically

I have one function which calculates the total amount.
amount=qty*rate
Here is my html code for showing table
When I add new row it doesn't trigger that calculate function
Can any one help me out?
Here is my script:
function calculate() {
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('rate').value;
var amnt = document.getElementById('amnt');
var myResult = myBox1 * myBox2;
amnt.value = myResult;
}
var count = "1";
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"r_name\" SIZE=\"30\">";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create table cell 2
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"r_desc\" PLACEHOLDER=\"description\" SIZE=\"30\">";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"r_qty\" PLACEHOLDER=\"QTY\" ID=\"qty\" ONINPUT=\"calculate()\" SIZE=\"30\">";
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"r_RATE\" PLACEHOLDER=\"rate\" ID=\"rate\" ONINPUT=\"calculate()\" SIZE=\"30\">";
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
var td5 = document.createElement("TD")
var strHtml5 = "<INPUT TYPE=\"text\" NAME=\"r_total\" PLACEHOLDER=\"amount\" ID=\"amnt\" >";
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// create table cell 4
var td6 = document.createElement("TD")
var strHtml6 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
td6.innerHTML = strHtml6.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
}
<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;">
<tr>
<th><center>Row material Name</center></th>
<th><center>Description</center></th>
<th><center>Qty.</center></th>
<th><center>Rate</center></th>
<th><center>Amount</center></th>
<th><center><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th>
</tr>
<tr>
<th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_desc" PLACEHOLDER="description" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_qty" PLACEHOLDER="QTY" ID="qty" ONINPUT="calculate()" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_RATE" PLACEHOLDER="rate" ID="rate" ONINPUT="calculate()" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_total" PLACEHOLDER="amount" ID="amnt" ></center></th>
<th><center></center></th>
</tr>
</TABLE>
Here is my HTML code

I understand now what you wanted to do.
You're using the same element id multiple times, so your calculate() function always selects only the first inputs in the first row.
I calculate() so it takes as a parameter the element that triggered the event and then traverses up the DOM tree to find the closest <tr>:
var tr = elm;
while ((tr = tr.parentElement) && tr.tagName !== 'TR');
Then select input fields only in this table row, calculate what you want and set it as a value to another input field in the same row.
Last thing I changes is that I trigger oninput with oninput=calculate(this) where this is the current DOM element.
function calculate(elm) {
var tr = elm;
while ((tr = tr.parentElement) && tr.tagName !== 'TR');
var inputs = tr.querySelectorAll('input');
var myBox1 = inputs[2].value;
var myBox2 = inputs[3].value;
var myResult = myBox1 * myBox2;
inputs[4].value = myResult;
}
var count = "1";
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"r_name\" SIZE=\"30\">";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create table cell 2
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"r_desc\" PLACEHOLDER=\"description\" SIZE=\"30\">";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"r_qty\" PLACEHOLDER=\"QTY\" ID=\"qty\" ONINPUT=\"calculate(this)\" SIZE=\"30\">";
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"r_RATE\" PLACEHOLDER=\"rate\" ID=\"rate\" ONINPUT=\"calculate(this)\" SIZE=\"30\">";
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
var td5 = document.createElement("TD")
var strHtml5 = "<INPUT TYPE=\"text\" NAME=\"r_total\" PLACEHOLDER=\"amount\" ID=\"amnt\" >";
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// create table cell 4
var td6 = document.createElement("TD")
var strHtml6 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
td6.innerHTML = strHtml6.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
}
<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;">
<tr>
<th><center>Row material Name</center></th>
<th><center>Description</center></th>
<th><center>Qty.</center></th>
<th><center>Rate</center></th>
<th><center>Amount</center></th>
<th><center><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th>
</tr>
<tr>
<th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_desc" PLACEHOLDER="description" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_qty" PLACEHOLDER="QTY" ID="qty" ONINPUT="calculate(this)" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_RATE" PLACEHOLDER="rate" ID="rate" ONINPUT="calculate(this)" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="r_total" PLACEHOLDER="amount" ID="amnt" ></center></th>
<th><center></center></th>
</tr>
</TABLE>

How to use Struts 1.2.9 tags

I am using Struts Version 1.2.9.
I have a requirement to add rows dynamically to a table using JavaScript which is working fine.
It looks like:
function addRow(tableID) {
var table = document.getElementById(tableID);
rowCount += 1;
if(rowCount <= 5){
var row = table.insertRow(3);
var col1html = "<label for='incomecategory'>Other Income:</label>";
var col2html = "<select id='incomecategory' name='income_category'><option value='' selected>Please Select</option><option value='rent'>Rent</option><option value='interestanddividends'>Interest and Dividends</option><option value='governmentbenefits'>Government Benefits</option><option value='other'>Other</option></select>";
var col3html = "$<input type='text' name='incomevalue' id='incomevalue'/>";
var col4html = "<select id='incomefrequency' name='income_frequency'><optgroup label='Per'><option value='perweek'>Per Week</option><option value='perfortnight'>Per Fortnight</option><option value='peryear'>Per Month</option><option value='peryear'>Per Year</option><option value='' selected>Per</option></select>";
var col5html = "<input type='button' value='X' onclick='removeRow(this)'/>"
var col1 = row.insertCell(0); col1.innerHTML=col1html;
var col2 = row.insertCell(1); col2.innerHTML=col2html;
var col3 = row.insertCell(2); col3.innerHTML=col3html;
var col4 = row.insertCell(3); col4.innerHTML=col4html;
var col5 = row.insertCell(4); col5.innerHTML=col5html;
}else{
alert('Reached maximum no of rows');
}
}
If you see carefully I have hardcoded all the HTML tags to build a row, but I want to instead use struts tags in creating rows.

Inserting Form into table with javascript

I am trying to insert Form into Table, but <form> tag is not inserted (only input type).
$(function () {
var table = document.getElementById("transport");
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);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell2.innerHTML = "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell10.innerHTML = "</form>";
});

As I mentioned above in the comments.
form start and end tag should be contained within a container.
But you are starting it in one cell and closing in another. That will not work.
Instead you can do this:
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell1.innerHTML += "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell1.innerHTML += "</form>";
And so that you know, there are many better ways... This is kind of old school way..(as mentioned again in comments)

var data =[];
function add(){
var fname = document.getElementById("firstname").value,
lname= document.getElementById("lastname").value,
email = document.getElementById("email").value,
age = document.getElementById("age").value,
mobile = document.getElementById("mobile").value,
gen = gender1.checked?gender1.value:gender2.value,
date = document.getElementById("date").value,
adress = document.getElementById("address").value,
city = document.getElementById("city").value,
state = document.getElementById("state").value,
zip = document.getElementById("zip").value,
pan = document.getElementById("pan").value,
tan = document.getElementById("tan").value,
aadhar = document.getElementById("aadhar").value,
obj = {name1:fname,name2:lname,mail:email,aged:age,num:mobile,gend:gen,tarrek:date,
add:adress,place:city,stat:state,zpicode:zip,panc:pan,tanc:tan,aadharc:aadhar}
data.push(obj);
var table = "<table class='table table-striped table-bordered margin' id='delet'>";
table+= "<tr><th>Firstname</th><th>Lastname</th><th>Email</th><th>Age</th><th>Mobile</th><th>Gender</th><th>Date</th><th>Address</th><th>City</th><th>State</th><th>Documents</th><th>Zip</th><th>Pan</th><th>Tan</th><th>Aadhar</th></tr>";
for(var i=0;i<data.length;i++){
table+="<tr><td>"+data[i].name1+"</td><td>"+data[i].name2+"</td><td>"+data[i].mail+
"</td><td>"+data[i].aged+"</td><td>"+data[i].num+"</td><td>"+data[i].gend+
"</td><td>"+data[i].tarrek+"</td><td>"+data[i].add+"</td><td>"+data[i].place+
"</td><td>"+data[i].stat+"</td><td>"+data[i].zpicode+"</td><td>"+data[i].panc+
"</td><td>"+data[i].tanc+"</td><td>"+data[i].aadharc+
"</td></tr>"
}
table+="</table>";
document.getElementById("table-data").innerHTML=table;
};

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];

Develop Reference

JavaScript is the programming language of the Web.

Function JavaScript to add row in a table - javascript

Related

websql add button to insert new values in table

Script doesn't work after adding row dynamically

How to use Struts 1.2.9 tags

Inserting Form into table with javascript

How to append a row to html table using DOM?

Categories

Resources