So i have this code here
`let Items = {};
Items[1]=["Car",7,99];
Items[2]=["Har",9,22];`
function add(){
counter+=1
html=`<tr id=row${+ counter} >
<td> <input id=in1${+ counter} type="text" > </td>
<td> <input id=in2${+ counter} type="text"> </td>
<td> <input id=in3${+ counter} type="text"> </td>
<td> <input id=in4${+ counter} type="text"> </td>
<td> <button onclick="Remove()"> Remove </button> </td>
<td> <button onclick="Update()"> Update </button> </td>
</tr>`
let table=document.getElementById("Table");
table.innerHTML+=html;
}
function commit(){
for(var i = 1 ; i <=counter; i++){
let it1= document.getElementById('in1'+i).value;
let it2= document.getElementById('in2'+i).value;
let it3 = document.getElementById('in3'+i).value;
let it4 = document.getElementById('in4'+i).value;
Items[it1]=[it2,it3,it4];
}
}
function display(){
for(let i in Items){
let table= document.getElementById("Table");
html=`<tr>
<td> <input type="checkbox"> </td>
<td> ${i} </td>
<td> ${Items[i][0]} </td>
<td> ${Items[i][1]} </td>
<td> ${Items[i][2]} </td>
<td> <button onclick="Remove()"> Remove </button> </td>
<td> <input type="reset" > </td>
</tr>`
table.innerHTML+=html;
}
So the code here is that you must press the add button/function to add your values then press commit to save changes to the Items Object, but idk why when i go to another page then press the display button/function which will display all the items inside the Items Object it just display the items that have been added manualy
Items[1]=["Car",7,99];
Items[2]=["Har",9,22];
But not the ones that the user have added through add and commit buttons/functions
The expected result should be that all the Items inside the Items object should printed whether it is added manualy or by the user
I have tried using the localStorage thihng but nothing happen the resutls maintain the same
Related
I have a table built in HTML and AngularJS (Angular 2). I am using an ngIf directive to trigger an editable fields from the scope where it was clicked.
If a user clicks "Edit" button, then all the fields in ONLY that row should become editable.
See my code below. Currently, when user clicks "Edit" button, then it will make all the input fields in the table editable. How can I prevent this? Only the row inside the scope of the "Edit" button should become editable. I am not sure how to accomplish this using AngularJS.
<tbody>
<tr *ngFor="let location of locations">
<td *ngIf="!editing">{{location.apName}}</td>
<td id="apNameInpit" *ngIf="editing"> <input [(ngModel)]="location.apName" type="text" placeholder="{{location.slackMemberID}}"/></td>
<td *ngIf="!editing">{{location.locationName}}</td>
<td id="locationNameInput" *ngIf="editing"> <input [(ngModel)]="location.locationName" type="text" placeholder="{{location.slackMemberID}}"/></td>
<td *ngIf="!editing">{{location.lat}}</td>
<td id="latInput" *ngIf="editing"> <input [(ngModel)]="location.lat" type="text" placeholder="{{location.slackMemberID}}"/></td>
<td *ngIf="!editing">{{location.long}}</td>
<td id="longInput" *ngIf="editing"> <input [(ngModel)]="location.long" type="text" placeholder="{{location.slackMemberID}}"/></td>
<td *ngIf="!editing">{{location.mac}}</td>
<td id="macInput" *ngIf="editing"> <input [(ngModel)]="location.mac" type="text" placeholder="{{location.slackMemberID}}"/></td>
<td>
<input type="button" *ngIf="!editing" class="btn btn-warning" (click)="engageEditing()" value="Edit" />
<input type="button" *ngIf="editing" class="btn btn-primary" (click)="updateField(location)" value="Update" />
<input type="button" *ngIf="editing" class="btn btn-warning" (click)="cancelEditing()" value="Cancel" />
</td>
</tr>
</tbody>
This is my location.component.ts code
engageEditing(){
this.editing = true;
}
If you want to enable editing for a single location instead of for the entire component, you need to remember it for each location. To add editing to your location object:
<tr *ngFor="let location of locations">
<td *ngIf="!location.editing">{{location.apName}}</td>
<td id="apNameInpit" *ngIf="location.editing"> <input [(ngModel)]="location.apName" type="text" placeholder="{{location.slackMemberID}}"/></td>
....
<td>
<input type="button" *ngIf="!location.editing" class="btn btn-warning" (click)="engageEditing(location)" value="Edit" />
<input type="button" *ngIf="location.editing" class="btn btn-primary" (click)="updateField(location)" value="Update" />
<input type="button" *ngIf="location.editing" class="btn btn-warning" (click)="cancelEditing(location)" value="Cancel" />
</td>
</tr>
And update it in engageEditing and cancelEditing:
engageEditing(location) {
location.editing = true;
}
cancelEditing(location) {
location.editing = false;
}
Rather than tracking editing as a boolean, track it as an integer. Then you know which index in your array is being edited.
this.editing = 5;
Then in your source you could use the for loop index to see if this is the current row being edited:
<tr *ngFor="let location of locations; let i = index">
<td *ngIf="editing == i">{{location.apName}}</td>
You'll also need to pass the index to your engageEditing() method so that it knows which row is being edited.
engageEditing(index) {
this.editing = index;
}
And call it from your button and pass the index into it. Note the i we got from our ngFor.
<input type="button" *ngIf="!editing" class="btn btn-warning" (click)="engageEditing(i)" value="Edit" />
When nothing is being edited, set the value to -1. It might be tempting to use 0 but that's the index of the first item:
cancelEditing() {
this.editing = -1;
}
Without index you can change your model of locations to:
locations = [{
name: "apName",
value: null,
slackMemberID: "something"
}
...
]
<tr *ngFor="let location of locations; let i = index"
(click)="markToEdit(location.name)">
<td *ngIf="editing !== location.name">{{location.apName}}</td>
<td id="location.name" *ngIf="editing === location.name">
<input [(ngModel)]="location.value" type="text"
placeholder="{{location.slackMemberID}}"/>
</td>
</tr>
public markToEdit(name: string){
this.editing = name;
}
Or use Reactive forms and in the end you have values in
form.value
<form id="form1">
<table style="border:1px solid black ; font-family : Arial">
<tr>
<td>
First Number
</td>
<td>
<input id="Text1" type="text"/>
</td>
</tr>
<tr>
<td>
Second Number
</td>
<td>
<input id="Text2" type="text"/>
</td>
</tr>
<tr>
<td>
Resut
</td>
<td>
<input id="ResultArea" type="text"/>
</td>
</tr>
<tr>
<td>
<input id="AddButton" type="button" value="Add" onclick="add()" />
</td>
</tr>
</table>
</form>
I am making simple program through JavaScript in which user are able to input 2 numbers and by clicking add button he will get the sum of those two inputs.
For this purpose i have two input fields for first and second input, one input field is for display the result after sum and also have one add button.
So here it is my java script function.
function add() {
var FirstNumber = document.getElementById("Text1").Value
var SecondNumber = document.getElementById("Text2").Value
document.getElementById("ResultArea").Value = FirstNumber + SecondNumber;
}
I don't know whats the problem but it is not working anyways . when give input and click on add button , there is no response , no error , nothing ..
typo change value instead of Value .V not in caps .Because JavaScript case sensitive .And you need parse the string using parseFloat() .Then only its performing the addition
function add() {
var FirstNumber = document.getElementById("Text1").value
var SecondNumber = document.getElementById("Text2").value
document.getElementById("ResultArea").value = parseFloat(FirstNumber)+ parseFloat(SecondNumber);
}
<form id="form1">
<table style="border:1px solid black ; font-family : Arial">
<tr>
<td>
First Number
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
Second Number
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
<tr>
<td>
Resut
</td>
<td>
<input id="ResultArea" type="text" />
</td>
</tr>
<tr>
<td>
<input id="AddButton" type="button" value="Add" onclick="add()" />
</td>
</tr>
</table>
</form>
function add() {
var FirstNumber = document.getElementById("Text1").value
var SecondNumber = document.getElementById("Text2").value
document.getElementById("ResultArea").value = Number(FirstNumber) + Number(SecondNumber);
}
<table id = 'dsTable' >
<tr id=1>
<td> Relationship Type </td>
<td> Date of Birth </td>
<td> Gender </td>
</tr>
<tr id=2>
<td> Spouse </td>
<td> 1980-22-03 </td>
<td> female </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)" </td>
</tr>
<tr id=3>
<td> Child </td>
<td> 2008-23-06 </td>
<td> female </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
</tr>
</table>
I want to delete the row by using both table id and row id in javascript. javascript code looks like this:
var child = document.getElementById(rowid);
child.parentNode.removeChild(child);
Here I am facing problem, the jsp page having multiple tables. So if I am trying to delete the row,it is deleting the other table rows. If I specify the table id along with row id the code will work fine.
Ids are suppose to be unique across your DOM, but you can first get the table
var table = document.getElementById("tableid");
var row = table.querySelector("tr[id='rowid']");
I recommend to use a different attribute other than id something like data-id
Now delete the row as
row.parentNode.removeChild(row)
var table = document.getElementById("dsTable");
var row = table.querySelector("tr[data-id='1']");
row.parentElement.removeChild(row);
<table id = 'dsTable' >
<tr data-id="1">
<td> Relationship Type </td>
<td> Date of Birth </td>
<td> Gender </td>
</tr>
<tr data-id="2">
<td> Spouse </td>
<td> 1980-22-03 </td>
<td> female </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)" </td>
</tr>
<tr data-id="3">
<td> Child </td>
<td> 2008-23-06 </td>
<td> female </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
</tr>
</table>
I am trying to create a simple ATM program with 5 buttons ($20, $60, $100, Other Amount, and Withdrawal). I need to create a confirm box when the money buttons are pressed and have the amount deducted from a text box when the withdraw button is pressed. Here is my code:
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var balance=50000;
function withdraw(amount)
{
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true)
{
balance = balance - amount;
}else
{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function
</script>
Please help! This is driving me crazy. Thanks!
Ok Lets have a look at some of the issues;
Indent your code properly, it will help you spot errors more easily.
Use an editor like notepad++ or better still an IDE that will show your syntactical errors
Don't use tables in your markup for layout purposes, learn css
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/> // you have an extra closing brace here
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/> //Current balance is not a valid type
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<script type="text/javascript">
var balance=50000;
function withdraw(amount) //this function should be called accept not withdraw
{ //you didn't close this brace
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true) //should be if (sure)
{
balance = balance - amount;
}else{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function //this shouldn't be here
</script>
I didn't get the question clearly, but I think you need to confirm an amount for your "Other Amount" button, of your ATM application. You are suppose to use "prompt", usage of it is just like an alert box.
<input type="button" value="Get" onclick="prompt('How Much Amount, you want to withdraw?')">
your code can be something, like shown above.
I have this table with some dependents information and there is a add and delete button for each row to add/delete additional dependents. When I click "add" button, a new row gets added to the table, but when I click the "delete" button, it deletes the header row first and then on subsequent clicking, it deletes the corresponding row.
Here is what I have:
Javascript code
function deleteRow(row){
var d = row.parentNode.parentNode.rowIndex;
document.getElementById('dsTable').deleteRow(d);
}
HTML code
<table id = 'dsTable' >
<tr>
<td> Relationship Type </td>
<td> Date of Birth </td>
<td> Gender </td>
</tr>
<tr>
<td> Spouse </td>
<td> 1980-22-03 </td>
<td> female </td>
<td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
</tr>
<tr>
<td> Child </td>
<td> 2008-23-06 </td>
<td> female </td>
<td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
</tr>
</table>
JavaScript with a few modifications:
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
And the HTML with a little difference:
<table id="dsTable">
<tbody>
<tr>
<td>Relationship Type</td>
<td>Date of Birth</td>
<td>Gender</td>
</tr>
<tr>
<td>Spouse</td>
<td>1980-22-03</td>
<td>female</td>
<td><input type="button" value="Add" onclick="add()"/></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
<tr>
<td>Child</td>
<td>2008-23-06</td>
<td>female</td>
<td><input type="button" value="Add" onclick="add()"/></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
</tbody>
</table>
jQuery has a nice function for removing elements from the DOM.
The closest() function is cool because it will "get the first element that matches the selector by testing the element itself and traversing up through its ancestors."
$(this).closest("tr").remove();
Each delete button could run that very succinct code with a function call.
Lots of good answers, but here is one more ;)
You can add handler for the click to the table
<table id = 'dsTable' onclick="tableclick(event)">
And then just find out what the target of the event was
function tableclick(e) {
if(!e)
e = window.event;
if(e.target.value == "Delete")
deleteRow( e.target.parentNode.parentNode.rowIndex );
}
Then you don't have to add event handlers for each row and your html looks neater. If you don't want any javascript in your html you can even add the handler when page loads:
document.getElementById('dsTable').addEventListener('click',tableclick,false);
Here is working code: http://jsfiddle.net/hX4f4/2/
I would try formatting your table correctly first off like so:
I cannot help but thinking that formatting the table could at the very least not do any harm.
<table>
<thead>
<th>Header1</th>
......
</thead>
<tbody>
<tr><td>Content1</td>....</tr>
......
</tbody>
</table>
Here's the code JS Bin using jQuery. Tested on all the browsers. Here, we have to click the rows in order to delete it with beautiful effect. Hope it helps.
I suggest using jQuery. What you are doing right now is easy to achieve without jQuery, but as you will want new features and more functionality, jQuery will save you a lot of time. I would also like to mention that you shouldn't have multiple DOM elements with the same ID in one document. In such case use class attribute.
html:
<table id="dsTable">
<tr>
<td> Relationship Type </td>
<td> Date of Birth </td>
<td> Gender </td>
</tr>
<tr>
<td> Spouse </td>
<td> 1980-22-03 </td>
<td> female </td>
<td> <input type="button" class="addDep" value="Add"/></td>
<td> <input type="button" class="deleteDep" value="Delete"/></td>
</tr>
<tr>
<td> Child </td>
<td> 2008-23-06 </td>
<td> female </td>
<td> <input type="button" class="addDep" value="Add"/></td>
<td> <input type="button" class="deleteDep" value="Delete"/></td>
</tr>
</table>
javascript:
$('body').on('click', 'input.deleteDep', function() {
$(this).parents('tr').remove();
});
Remember that you need to reference jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Here a working jsfiddle example:
http://jsfiddle.net/p9dey/1/
Use the following code to delete the particular row of table
<td>
<asp:ImageButton ID="imgDeleteAction" runat="server" ImageUrl="~/Images/trash.png" OnClientClick="DeleteRow(this);return false;"/>
</td>
function DeleteRow(element) {
document.getElementById("tableID").deleteRow(element.parentNode.parentNode.rowIndex);
}
try this for insert
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
and this for delete
document.getElementById("myTable").deleteRow(0);
Yeah It is working great
but i have to delete from localstorage too, when user click button , here is my code
function RemoveRow(id) {
// event.target will be the input element.
// console.log(id)
let td1 = event.target.parentNode;
let tr1 = td1.parentNode;
tr1.parentNode.removeChild(tr1);// the row to be removed
// const books = JSON.parse(localStorage.getItem("books"));
// const newBooks= books.filter(book=> book.id !== books.id);
// console.log(books, newBooks)
// localStorage.setItem("books", JSON.stringify(newBooks));
}
// function RemoveRow(btn) {
// var row = btn.parentNode.parentNode;
// row.parentNode.removeChild(row);
// }
button tag
class Display {
add(book) {
console.log('Adding to UI');
let tableBody = document.getElementById('tableBody')
let uiString = `<tr class="tableBody" id="tableBody" data-id="${book.id}">
<td id="search">${book.name}</td>
<td>${book.author}</td>
<td>${book.type}</td>
<td><input type="button" value="Delete Row" class="btn btn-outline-danger" onclick="RemoveRow(this)"></td>
</tr>`;
tableBody.innerHTML += uiString;
// save the data to the browser's local storage -----
const books = JSON.parse(localStorage.getItem("books"));
// console.log(books);
if (!books.some((oldBook) => oldBook.id === book.id)) books.push(book);
localStorage.setItem("books", JSON.stringify(books));
}
Hi I would do something like this:
var id = 4; // inital number of rows plus one
function addRow(){
// add a new tr with id
// increment id;
}
function deleteRow(id){
$("#" + id).remove();
}
and i would have a table like this:
<table id = 'dsTable' >
<tr id=1>
<td> Relationship Type </td>
<td> Date of Birth </td>
<td> Gender </td>
</tr>
<tr id=2>
<td> Spouse </td>
<td> 1980-22-03 </td>
<td> female </td>
<td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)" </td>
</tr>
<tr id=3>
<td> Child </td>
<td> 2008-23-06 </td>
<td> female </td>
<td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
<td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
</tr>
</table>
Also if you want you can make a loop to build up the table. So it will be easy to build the table. The same you can do with edit:)