I am trying to write a simple product management program. Basically, when users input a product name, it will be saved to an array and displayed on the table using a for loop.
I am having trouble with my codes here. It shows duplicate each time I click add a product. For example, the 1st time I add productA, it shows productA. The second time I add productB, it shows productA, productA, productB (duplicate productA).
I know the problem is within the loop I use, but have no idea how to fix.
I cannot paste HTML code here, but here is the link to my codes. https://github.com/minhle0105/functionPractice/tree/main/productManagement
Thanks everyone
You were displaying products array instead of the new product, that's what it was displaying the whole array.
TRY This
<!DOCTYPE html>
<html>
<head>
<title>Product List Management</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Add New Product</p>
<div class="add_product">
<input type="text" name="productAdd" id="productAdd" placeholder="New Product">
<button type="button" id="addbtn" onclick="addProductToList()">Add</button>
</div>
<p>Display All Products</p>
<div class="productDisplay" id="productDisplay">
<table class="table">
<thead>
<tr>
<th style="text-align: left; background-color: white;">Product Names</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<script>
let products = [];
let count = 0;
function addProductToList() {
let productAdd = document.getElementById("productAdd").value;
products.push(productAdd);
document.getElementById("result").innerHTML ="";
displayProduct(products)
}
function displayProduct(products) {
for(let i=0; i<products.length; i++){
document.getElementById("result").innerHTML +=`<tr>
<td>${i+1}</td>
<td>${products[i]}</td>
<td><button type="button" class="btn edit">Edit</button></td>
<td><button type="button" class="btn delete">Delete</button></td>
</tr>
`
}
}
</script>
</body>
</html>
Something like this
let products = [];
let count = 0;
function addProductToList() {
let productAdd = document.getElementById("productAdd").value;
products.push(productAdd);
document.getElementById("productAdd").value=''; document.getElementById("result").innerHTML ="";
displayProduct(products)
}
function displayProduct(products) {
for (var i = 0; i < products.length; i++) {
document.getElementById("result").innerHTML +=`<tr>
<td>${products[i]}</td>
</tr>
`
}
}
<div class="add_product">
<input type="text" name="productAdd" id="productAdd" placeholder="New Product" required>
<button type="button" id="addbtn" onclick="addProductToList()">Add</button>
</div>
<div class="productDisplay" id="productDisplay" style="margin-top: 15px;">
<table class="table">
<thead>
<tr>
<th>Product</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
Related
I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
jquery #.js:
$document.ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
$("rembtn").click(function(){
$(this).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
$("#myTable tbody").append(blankRow);
}
});
}
else{
alert("Error: Please provide input for all fields")
}
});
});
I'd greatly appreciate any help on this matter.
I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.
$(document).ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
}
else{
alert("Error: Please provide input for all fields")
}
});
});
function remove(elem){
$(elem).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
I want to achieve the below two scenarios:
Need to add rows on click of the plus button.
Need to replace the plus button with a hyperlink from the dynamically added rows.
<button type="button" class="addRow" />+</button>
Replace the above button with the below for all the dynamically added rows.
Remove
I've done the first scenario and stuck with the second one.
HTML:
<table id="exampleTbl">
<tr>
<td>1</td>
<td>2</td>
<td>
<button type="button" class="addRow" />+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>
<button type="button" class="addRow" />+</button>
</td>
</tr>
</table>
jQuery:
$(function() {
$('#exampleTbl').delegate('button.addRow', 'click', function() {
var row = $(this).closest('tr'); // get the parent row of the clicked button
var html = $(this).closest('tr').clone();
$(html).insertAfter(row); // insert content
});
});
You could try this.
$(function() {
$('#exampleTbl').delegate('button.addRow', 'click', function() {
var row = $(this).closest('tr'); // get the parent row of the clicked button
var html = $(this).closest('tr').clone();
$(html).insertAfter(row); // insert content
let btn = $('Remove');
btn.click(function () {
$(html).remove(); // Remove row on click
})
$(html).find('.addRow').replaceWith(btn);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="exampleTbl">
<tr>
<td>1</td>
<td>2</td>
<td>
<button type="button" class="addRow">+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>
<button type="button" class="addRow">+</button>
</td>
</tr>
</table>
Working JSFiddle: https://jsfiddle.net/j18yfwLv/1/
Note: I just replaced the button with the content you wanted, do you want the button to remove the row as well?
I'm trying to export a painted html table completely dynamically into a csv file. I tried to implement several Scripts, functions.etc but I have not obtained the desired result. If anyone can help me, I'd be very grateful.
The information in the table is loading from a Request in "jsonData", It is important to clarify that I do not require to know the "Headers", only the information inside the table body:
ts Code:
jsonData:any;
_object = Object;
"jsonData" looks like:
[{
Subject_ID: "ACCT101",
First_Available_Date: "01/01/01",
....
},
{
Subject_ID: "510862185-X",
First_Available_Date: "06/04/19"..}....
]
HTML
<table>
<thead>
<tr>
<th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of jsonData; let i = index">
<td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td>
</tr>
</tbody>
</table>
<button class="btn btn-submit btn-sm float-right" type="submit" (click)="export()">
Submit
</button>
Please try below code. this will extract data from table and download as csv.
<!DOCTYPE html>
<html>
<head>
<style>
td, table,th{
border: solid 1px black;
}
</style>
</head>
<body>
<table id="data_table">
<thead>
<tr>
<th>Subject_ID</th>
<th>First_Available_Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT101</td>
<td>01/01/01</td>
</tr>
<tr>
<td>510862185-X</td>
<td>06/04/19</td>
</tr>
<tr>
<td>New data</td>
<td>New data 1</td>
</tr>
</tbody>
</table>
<script>
function exportit() {
var csv='';
table=document.getElementById("data_table");
tr=table.children[0].children[0];
for(i=0;i<tr.children.length;i++)
{
csv+=tr.children[i].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
tbody=table.children[1];
for(i=0;i<tbody.children.length;i++)
{
for(j=0;j<tbody.children[i].children.length;j++)
{
csv+=tbody.children[i].children[j].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
}
csv=csv.substring(0,csv.length-1)+"\n";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'data.csv';
hiddenElement.click();
}
</script><br>
<button onclick="exportit()">export</button>
</body>
</html>
When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO