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>
Related
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>
So I am trying to make it when someone types in a "textarea" and while typing it displays the number of characters type so far. The code below is the field I am trying to have the counter for. I want the character counter by the work Troubleshooting. Any ideas how I can go about do it??
<tr>
<td width="70%">
<b>Troubleshooting</b><br />
</td>
<td width="30%">
<a href="javascript: validateHP()" onMouseover="buttonObject_HP.src='images/hp_1.png'" onMouseout ="buttonObject_HP.src='images/hp_0.png'">
<img name="buttonObject_HP" src="images/hp_0.png" border=0 alt="" width="75" height="20"/></a>
</td>
</tr>
</table>
<textarea class="normal" id="Reported" name="Reported" rows="12" cols="51" onchange="validateText();"></textarea>
I did the following to get what I wanted.
Placed the following in the head
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 10000) {
val.value = val.value.substring(50, 10000);
} else {
$('#charNum').text(2000 - len);
}
};
</script>
Then placed the following div under my Troubleshooting
<div id="charNum">Characters Left</div>
Lastly I added the following to my textarea
onkeyup="countChar(this)"
You can use this in your code. It uses AngularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>{{name.length}}</h1>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller('test',function($scope){
$scope.my="hi";
$scope.myimag=["Feature-Category1.png","Feature-Category2.png","Feature-Category3.png","Feature-Category1.png","Feature-Category1.png"];
});
</script>
<body ng-app="myapp">
<div ng-controller="test">
<div class="col-md-3 col-sm-3 col-xs-3" ng-repeat="x in myimag">
<img alt="" ng-src="{{x}}">
</div>
</div>
</body>
i want to repeat the items in the myimg but it not working it get errors why
You are missing module, controller and again use $scope variable instead of var,
$scope.myimg=["img.png","img1.png","img2.png"];
DEMO
var testApp= angular.module('test',[])
angular.module('test').controller('testCtrl',function($scope){
$scope.myimg=["altair7.jpg","altair6.jpg"];
})
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="testCtrl.js"></script>
</head>
<body ng-app="test">
<div ng-controller="testCtrl">
<div class="col-md-2" ng-repeat="x in myimg ">
<img ng-src="{{x}}">
</div>
</div>
</body>
</html>
Three problems With your code :
You haven't defined an angular module.
You haven't defined a controller for that view.
In order to acheive two way data binding , you need to define your variables with $scope instead of defining it as 'var'
Update your code as shown below :
angular.module('myApp', [])
.controller('myController', function TodoCtrl($scope) {
$scope.myimg=["img.png","img1.png","img2.png"];
});
Html:
<div ng-app="myApp" ng-controller="myController">
<div class="col-md-2" ng-repeat="x in myimg ">
<img ng-src="{{x}}">
</div>
</div>
I have a table with 2 columns and 2 rows like this
I would like to make the elements of the first column clickable and when one clicks on it, it appears another table under that row.
I thought of adding an href but this doesnt work:
<font face="Arial, Helvetica, Geneva">
<table id="tableInfo" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>
<a href=#info1 >
<table id="tableInfoNested1" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Address</tr>
<tr>City</tr>
</tbody>
</table>
Name
</a>
</tr>
<tr>
<a href=#info2 >
<table id="tableInfoNested2" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Test</tr>
<tr>Test</tr>
</tbody>
</table>
Code
</a>
</tr>
</tbody>
</table>
</font>
Try this...
<a id="LogicLink" onclick="Table1();" href="#">Name</a>
<table id="TableNested1" style="display:none">
<tr><td>Adresss<td/><tr/>
<tr><td>City<td/><tr/>
<table/>
<br/>
<a id="Link" onclick="Table2();" href="#">Code</a>
<table id="TableNested2" style="display:none">
<tr><td>Test<td/><tr/>
<tr><td>Test<td/><tr/>
</table>
function Table1()
{
var elem=document.getElementById("TableNested1");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
function Table2()
{
var elem=document.getElementById("TableNested2");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
http://jsfiddle.net/Wfxpu/180/
Have a look at this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li>Adele</li>
<li>Agnes</li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li>Calvin</li>
<li>Cameron</li>
<li>Chloe</li>
<li>Christina</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
OR
http://jasalguero.com/ledld/development/web/expandable-list/
You will have to apply the same principle to your table
i'm trying to replicate what you can see in the image here in jquery to make a touch enabled version of an existing application:
I'm using jquery-ui sliders and i'd like to keep using them because i have a lot of business logic tied to them, actually they have this look:
I need help for the css and html part, i don't know how to make the effect where the "slider" gets filled when the user click on the "plus" button and on how i should organize my HTML to achieve that look.
My markup is as follows:
<table>
<tr>
<td>
<div id="timeName">
Tempo a disposizione
</div>
<div id="travelTime">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Architecture and Heritage
</div>
<div id="Architecture_and_Heritage" class="param" data-id="3">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Culture
</div>
<div id="Culture" class="param" data-id="5">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Fairs Performances and Special Events
</div>
<div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Food and Drink
</div>
<div id="Food_and_Drink" class="param" data-id="1">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
</table>
Is this any help? It's not really styled but sort of gives the idea: http://jsfiddle.net/TU95t/
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
var select = $( "#demo" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
value: 1,
range: "min",
change: function(event, ui) {
var sliderValue = $( "#slider" ).slider( "option", "value" );
$('#sliderPosition').html(sliderValue);
}
});
$('#increase').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue + 1 );
});
$('#decrease').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue - 1 );
});
});
</script>
<div id="demo">
<div id="sliderPosition">1</div>
</div><!-- End demo -->
<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
+ Increase Slider Value
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
- Decrease Slider Value
</div>
</body>
</html>
<!-- End demo -->