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>';
Related
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³'>";
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.
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>
This question can be a duplicate.
I need add 24 rows in a html table with 8 columns on click of button. I look for some examples, and I tried this (code below), but only row is add. Someone could help? Thanks for attention.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = 3;
for (var i = 0; i < 24; i++) {
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(i);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chbx";
var element2 = document.createElement("label");
if (i < 9) {
element2.innerHTML = "0" + i ;
}
else {
element2.innerHTML = i;
}
element2.name="lbl";
cell1.appendChild(element1);
cell1.appendChild(element2);
var cell2 = row.insertCell(i + 1);
cell2.innerHTML = "2";
var cell3 = row.insertCell(i + 2);
cell3.innerHTML = "3";
var cell4 = row.insertCell(i + 3);
cell4.innerHTML = "4";
var cell5 = row.insertCell(i + 4);
cell5.innerHTML = "5";
var cell6 = row.insertCell(i + 5);
cell6.innerHTML = "6";
var cell7 = row.insertCell(i + 6);
cell7.innerHTML = "7";
var cell8 = row.insertCell(i + 7);
cell8.innerHTML = "8";
rowCount++;
}
}
Check out this approach:
JS
var table = document.getElementById('table');
function addRows(table, rows, columns){
var row = '';
for (var i = 0; i < rows; i++){
row = '<tr>';
for(var j = 0; j < columns; j++){
row += '<td>' + j +'</td>'
}
row += '</tr>';
table.innerHTML += row
}
}
addRows(table, 24, 8);
HTML
<table id="table">
</table>
Check out this codepen.
I am relatively new to Javascript. Any help will be very much appreciated.
function insertAnswer(){
//table
var innerTable = document.getElementById('inner_table');
//the new row to be placed before this button
var buttonAddAnswer = document.getElementById ("addMoreAnswer");
var row = document.createElement('tr');
var col = document.createElement('td');
var col2 = document.createElement('td');
var newCount = counter + 1;
col2.innerHTML = (counter + 1) + " <input type='text' name='answer" + newCount + "' id='answer" + newCount + "' class='mlselect' maxlength='200' size='90' >   <label>Go to:</label><input type='text' name='goTo' id='goTo' class='mlselect' maxlength='10' size='10' >";
row.appendChild(col);
row.appendChild(col2);
innerTable.appendChild(row);
//innerTable.parentNode.insertBefore(row, buttonAddAnswer);
counter++;
}
If I want to insert my row before the button, how do I go about it? I have tried toinsertBefore, but it does not seem to work. Can someone please steer me towards the right direction?
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.