When i try writing in textboxes the second time the window shows undefined, and if I try writing in the textboxes for the third time, it shows nothing.
I have a table that i wish to append a tablerow to. So when a button is clicked it will append a tr to a tbody, it works on the first click, but not on the second or third.
var expName = document.getElementById("expName");
var button = document.getElementById("button");
var amount = document.getElementById("amount");
var tbody = document.getElementById("tbody");
var date = document.getElementById("calendar");
var clear = document.getElementById("clear");
//print the tabledata
button.addEventListener("click", function() {
expName = expName.value;
amount = amount.value;
date = date.value;
var tr = document.createElement("tr");
tr.innerHTML += "<td>" + expName + "</td>" + "<td>" + amount + "</td>" + "<td>" + date + "</td>";
//set the value back to the original
tbody.appendChild(tr);
document.getElementById("expName").value = "";
document.getElementById("amount").value = "";
document.getElementById("calendar").value = "";
//delte all table rows
clear.addEventListener("click", function() {
window.location.reload();
})
<h1>Expense Tracker</h1>
<b>Item Name: </b><input type="text" id="expName">
<br/>
<br/>
<b>Amount: </b><input type="text" id="amount">
<b>Date: </b><input type="date" id="calendar">
<br/>
<br/>
<button id="button">add expense</button>
<button id="clear">Clear List</button>
<br/>
<br/>
<table id="table">
<thead>
<th>Name</th>
<th>Amount</th>
<th>Date</th>
</thead>
<tbody id="tbody"></tbody>
</table>
Related
I have problem getting the value of the replace new table row, I will let you show the codes for the replacing new table row.
The is the Table B, Where this code use for replacing new table row to the Table A
$('#edit_chainingBuild').on('click','tr.clickable-row',function(e){
$('table#edit_chainingBuild tr').removeClass('selected');
$(this).addClass('selected');
var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
$('.id_to_update_chain').val(find_each_id_will_update);
var find_each_id_condiments = $(this).find('.data-attribute-chain-id').attr('data-attribute-condiments-section-id');
$.ajax({
url:'/get_each_id_section_condiments',
type:'get',
data:{find_each_id_condiments:find_each_id_condiments},
success:function(response){
var get_each_section = response[0].condiments_table;
$.each(get_each_section, function (index, el) {
var stringify = jQuery.parseJSON(JSON.stringify(el));
var cat_condi_screen_name = stringify['cat_condi_screen_name'];
var cat_condi_price = stringify['cat_condi_price'];
var cat_condi_image = stringify['cat_condi_image'];
var condiment_section_name = stringify['condiment_section_name'];
var image = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';
// $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");
$('table#edit_table_chaining_condiments').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td>"+condiment_section_name +"</td><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");
});
$("table#edit_table_chaining_condiments tr").click(function(e){
var tableBhtml = $(this).closest('tr').html();
var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
// var input = '<input type="number" id="qty" name="qty" class="form-control changeQuantity" value="1" min="1">';
var id_to_edit_build = $('.id_to_update_chain').val();
$("#edit_chainingBuild tr.selected").html('');
var id_to_edit_builders = $('.id_to_update_chain').val();
$("#edit_chainingBuild tr.selected").replaceWith("<tr data-attribute-chain-id=" + id_to_edit_build + " class='clickable-row'><td class='new_condiments_name'>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td><td style='display:none;' data-attribute-chain-id="+id_to_edit_builders +" class='data-attribute-chain-id'>"+id_to_edit_builders+"</td></tr>");
$('#EditcondimentsBuilderModal').modal('hide');
});
},
error:function(response){
console.log(response);
}
});
$('#EditcondimentsBuilderModal').modal('show');
});
Looking forward if the table row already replace, I want to get the value of the class of new_condiments_name. So I create a variable to find the class of new_condiments_name. It look like this.
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
So now when I try alert the variable new_condiments_name using the click function it shows null only.
$('.edit_build_success_insert').click(function(){
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
alert(new_condiments_name);
});
My Html Table:
<div class="modal-body">
<div class="container">
<div class="header" style="text-align: center;">
<br>
<h3 style="color:#007BFF;">Build Your Chain Button</h3>
<label>This button will be served as customers menu.</label><br>
<i class="fab fa-creative-commons-remix" style="font-size:70px;"></i>
<br><br>
<input type="hidden" value="" class="edit_hidden_noun_id" name="">
<table class="table table-hover" id="edit_chainingBuild">
<thead>
<tr style="font-size: 15px;">
<!-- <th scope="col">Qty</th> -->
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px;">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="edit_build_success_insert btn btn-primary">Build Done</button>
</div>
I have here the image to proof that the value that i get always null.
$('table .edit_build_success_insert').click(function(){
var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
alert(new_condiments_name);
});
the problem here is i don't need input field required when i remove required the table still empty and another problem when i enter (not valid character)
also the table data will be deleted
i need the input field not required and when click add it adds a new row
var myInput = document.getElementById("myInput")
myTable = document.getElementById("myTable")
i = 1
num = 1
tabledata = myTable.innerHTML;
function arr() {
if(myInput.value!=""){
if(/^[a-z]+$/i.test(myInput.value)){
if (num % 2 == 0) {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ff8000"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
} else {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ffb366"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
}
num++;
}
else {
alert("Please Enter A Valid Charceter");
}
}else{
alert("This Field Is Reqiured Please Enter Your Name")
}};
function res() {
myTable.innerHTML = "<tr> <th>Id</th> <th>Name</th> </tr>";
i = 1;
num = 1;
}
<h1>Enter Your Name</h1>
<form>
<input type="text" id="myInput" required/>
<button onclick="arr()">Add</button>
</form>
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</table>
<button onclick ="res()">Reset</button>
I didn't fully understand what you need, but I see here a little bit flaw:
When you click the "Add" button, the form is submitting, so you need to break this.
Try it:
<style>
#myTable tr {
background: #FF8000
}
#myTable tr:nth-child(odd){
background: #FFB366
}
</style>
<h1>Enter Your Name</h1>
<form id="myForm">
<input type="text" id="myInput" required />
<input type="submit" />
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody id="myTable"></tbody>
</table>
<button id="myButton">Reset</button>
<script>
(function(){
"use strict";
var
form = document.getElementById("myForm"),
input = document.getElementById("myInput"),
table = document.getElementById("myTable"),
reset = document.getElementById("myButton");
form.addEventListener("submit", add, true);
function add(event){
event.preventDefault();
if( /^[a-z]+$/i.test(myInput.value) )
table.innerHTML += '<tr><td>' + (table.children.length + 1) + '</td><td>' + input.value + '</td></tr>';
return input.value = '';
}
function reset(){
table.innerHTML = '';
}
})()
</script>
I want to add edit and remove buttons in the third row of the table below whenever a row is added to the table. When the user user click edit, the columns cells becomes editable based on their original type (text-box and drop-down menu) and allow editing. In addition, the edit button adds a new save button after the user clicks the edit button. When the user clicks delete, the row gets deleted. I have seen a lot of previous posts but I want to use HTML and Javascript-only unless if it is not possible at all (some solutions recommend external libraries and some use JQuery).
I tried several ways with no success. I will be thankful to any pointer or code snippet that simplifies this task for me.
I have a database where I get and store data to but I am simplifying the code with arrays as follows.
HTML:
<html>
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="text"></td>
<td>
<select name="levels" id="levels">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>
</table>
</div>
<script src="get-text.js"></script>
</body>
</html>
Script:
var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];
//to display stored data in the table
function display()
{
var table=document.getElementById("mytable");
var length=myArray.length;
for(var i=0; i<length; i++)
{
var row = table.insertRow(i+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = myArray[i].name;
cell2.innerHTML = myArray[i].level;
}//end for
} //end display
display(); //call display.
var addButton=document.getElementById("add-button");
//listen to add button. If clicked, store the entered data and append them in the display
addButton.addEventListener('click', function (){
event.preventDefault();
//get the data from the form
var mytext = document.getElementById("text").value;
var mylevel = document.getElementById("levels").value;
//store the entered values into the array
myArray.name=mytext;
myArray.level=mylevel;
var length=myArray.length;
console.log("Array Length: "+length)
//add the entered data to the table.
var table=document.getElementById("mytable");
var newRow = table.insertRow(length+1);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = mytext;
cell2.innerHTML = mylevel;
mytext.value = '';
}, false);
EDIT:
I am trying to something like this in my code. Add, Edit, Delete from Tables Dynamically but my attempts were not successful in this part.
Full working code:
<html>
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button onclick='display()'> Display</button>
<!--<script src="get-text.js"></script>-->
</body>
</html>
<script>
var myArray = [{ "name": "aaa", "level": "A" }, { "name": "bbb", "level": "B" }, { "name": "ccc", "level": "C" }];
function display() {
var length = myArray.length;
var htmltext = "";
for (var i = 0; i < length; i++) {
console.log(myArray[i]);
htmltext += "<tr id='table"+i+"'><td>"
+myArray[i].name+
"</td><td>"
+myArray[i].level+
"</td><td><button onclick='edit("+i+")'>Edit</button><button onclick='remove("+i+")'>Remove</button></td></tr>";
}
document.getElementById("tbody").innerHTML = htmltext;
}
function edit(indice) {
var htmltext = "<tr><td><input id='inputname"+indice+"' type='text' value='"
+myArray[indice].name+
"'></td><td><input id='inputlevel"+indice+"' type='text' value='"
+myArray[indice].level+
"'></td><td><button onclick='save("+indice+")'>Save</button><button onclick='remove("+indice+")'>Remove</button></td></tr>";
document.getElementById("table"+indice).innerHTML = htmltext;
}
function save(indice) {
myArray[indice].name = document.getElementById("inputname"+indice).value;
myArray[indice].level = document.getElementById("inputlevel"+indice).value;
var htmltext = "<tr id='table"+indice+"'><td>"
+myArray[indice].name+
"</td><td>"
+myArray[indice].level+
"</td><td><button onclick='edit("
+indice+")'>Edit</button><button onclick='remove("
+indice+")'>Remove</button></td></tr>";
document.getElementById("table"+indice).innerHTML = htmltext;
}
function remove(indice) {
console.log(myArray);
myArray.splice(indice, 1);
display();
}
</script>
I want to make a site where a group of people have to add some data, later I will store them into a database.
I don't know the exact number of people and the exact number of rows so I made a function in JavaScript that generates a table when a button is pressed, and same with the rows.
I have some problems that I can't find the solution, that's why I ask here for help:
When I press the button "Add new Table" is like he enters on another page to load it. I tried to use tag and also but still the same.
When I press on "addRow" he put the id(number) 1 again, but I incremented the counter, again I don't know where is happend this.
When I add a new table and I try to add a row to it, he put the row to the first table, I was thinking that this is happend because all the tables have the same id, but why he don't add a row to all of them?
I want to add the row to that particular table where I press the button. My solution would be to add a particular id to every table.
I tried this:
var tableId = 1;
document.write('<div class="window_wrap"> <table class="window" id="idWindowTable' + tableId++ + '">' + table + '</table> </div>');
but I don't know how to increment the id in the addRow function:
var windowTab = document.getElementById("idWindowTable");
Here is my script:
<script>
var table = ''; //table from genTab
var rows = 1; //for genTab
var cols = 3; //for genTab
var rowCounter = 3; //starts from index 3 when add row on table
var nr = 1; // write the id at the number
var tableId = 1;
function genTab() {
table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';
for(var r = 0; r < rows; r++)
{
table += '<tr>';
for(var c = 0; c < cols; c++)
{
if(c==0)
table += '<td class="window_cells">' + nr++ + '</td>';
else
table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
}
table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
}
document.write('<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>');
nr = 1;
table = '';
}
function addRow() {
var windowTab = document.getElementById("idWindowTable");
var roww = windowTab.insertRow(rowCounter++);
var cell1 = roww.insertCell(0);
var cell2 = roww.insertCell(1);
var cell3 = roww.insertCell(2);
cell1.innerHTML = nr++;
cell1.className = "window_cells";
cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell2.className = "window_cells";
cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell3.className = "window_cells";
}
genTab();
</script>
Here is a begin. Use innerHTML and remove the nr=1 in the genTab function
var table = ''; //table from genTab
var rows = 1; //for genTab
var cols = 3; //for genTab
var rowCounter = 3; //starts from index 3 when add row on table
var nr = 1; // write the id at the number
var tableId = 1;
function genTab() {
table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" placeholder="(email#info.uvt.ro)" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';
for (var r = 0; r < rows; r++) {
table += '<tr>';
for (var c = 0; c < cols; c++) {
if (c == 0)
table += '<td class="window_cells">' + nr+++'</td>';
else
table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
}
table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
}
document.getElementById("content").innerHTML+='<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>';
table = '';
}
function addRow() {
var windowTab = document.getElementById("idWindowTable");
var roww = windowTab.insertRow(rowCounter++);
var cell1 = roww.insertCell(0);
var cell2 = roww.insertCell(1);
var cell3 = roww.insertCell(2);
cell1.innerHTML = nr++;
cell1.className = "window_cells";
cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell2.className = "window_cells";
cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
cell3.className = "window_cells";
}
window.onload = function() {
genTab();
}
<div id="content"></div>
i have made one form in table form which adds row dynamically but when i submit after filling data it gets only one data row which was filled last.
please help me out to get all data in data table for mysql.
here is my html code
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\"PLACEHOLDER=\"Name\" >";
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\" >";
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\" NINPUT=\"calculate()\">";
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\" ONINPUT=\"calculate()\" >";
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
// create table cell 4
var td5 = document.createElement("TD")
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
// 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);
}
<div class="table-responsive">
<table ID="tblPets" class="table table-bordered table-hover">
<thead>
<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><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th>
</tr>
</thead>
<tbody >
<tr>
<form action="add_item - Copy.php" method="post">
<th><INPUT TYPE="text" NAME="r_name" PLACEHOLDER="Name"></th>
<th><INPUT TYPE="text" NAME="r_desc" PLACEHOLDER="description" ></th>
<th><INPUT TYPE="text" NAME="r_qty" PLACEHOLDER="QTY" ONINPUT="calculate()" ></th>
<th><INPUT TYPE="text" NAME="r_RATE" PLACEHOLDER="rate" ONINPUT="calculate()"></th>
<th></th>
</tr>
</tbody>
<tfoot>
<tr>
<td> <input type="submit" name="sub" value="Submit"></td>
<td></td>
</tr>
</tfoot>
</form>
</table>
</div>
here is php code for insert data
if(isset($_POST['sub'])) {
$r_nm=$_POST['r_name'];
$r_qty=$_POST['r_qty'];
$r_rate=$_POST['r_RATE'];
$insert_rm="insert into tbl_row_material (rm_name,rm_qty, rm_rate) VALUE ('$r_nm','$r_qty','$r_rate')";
mysqli_query($dbcon,$insert_rm);
}
try this
if(isset($_POST['sub']))
{
$r_nm=$_POST['r_name'];
$r_qty=$_POST['r_qty'];
$r_rate=$_POST['r_RATE'];
$insert_rm="insert into tbl_row_material (rm_name,rm_qty, rm_rate) VALUES ('$r_nm','$r_qty','$r_rate')";
mysqli_query($dbcon,$insert_rm);
}
Place <form> tag above <table> tag
and also place </form> tag below </table> tag
As you are getting data in array, you can use the below code to insert. I have not tested this code there might be any syntax error.
$r_nm = $_POST['r_name'];
$r_qty=$_POST['r_qty'];
$r_rate=$_POST['r_RATE'];
foreach($r_nm as $key=>$val){
//Your inser query here
$insert_rm= "insert into tbl_row_material (rm_name,rm_qty, rm_rate) VALUE ($val,$r_qty[$key],$r_rate[$key])";
mysqli_query($dbcon,$insert_rm);
}