I need a table whose rows can be added dynamically on a button click and the table itself can be re-created and shown on the page with another button click
I have created the following
HTML:
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<a href="#"
class="button"
ng-click="addRow()">
Add Row</a>
<a href="#"
class="button"
ng-click="addTable()">
Add Table </a>
<div ng-repeat="data in table">
<table>
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in rows">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
<div>
</body>
</html>
Here's my Controller:
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.table=['Table 1'];
$scope.rows = ['Row 1'];
$scope.counter = 3;
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
$scope.addTable = function() {
$scope.table.push('Table ' + $scope.counter);
$scope.counter++;
}
}]);
Everything works fine except that when I click on Add Table , The previous table along with the added rows gets copied.
I want to just have the initial instance of the table with just one row to add age and name.
Please help:
Code pen Link :http://codepen.io/anon/pen/wBwXJP
if you make an object from the table by doing this
$scope.tables=[{name: "table 1"}];
$scope.tables[0].rows=['row1']
this will make it posible to add a row to $scope.tables[0].rows
that way it will only be added to the first
for new you just push
$scope.tables.push({name: 'Table ' + $scope.counter});
and it will create a whole new table
and you have to change rows in
<tr ng-repeat="rowContent in table.rows">
i hope this will help you in the right way
here i edited your code to make it the way i think it is best
code
Related
I want to get from the following html "only" the number 0 or the number 1 depending on which table row I click (FYI: there will be many rows with different numbers):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
This is how it looks visually:
This is how the html looks in console view:
This is my javascript function:
function setUnstakeNumber() {
let selection = document.getSelection();
let finalSelection = selection.anchorNode.data
let activeTextarea = document.activeElement;
let parent = document.documentElement.parentElement; // Returns the <html> element
console.log(selection);
console.log(finalSelection);
console.log(parent);
console.log(activeTextarea);
}
But none of the above works.
The closest one is the finalSelection, but I need to really click exactly on top of the number I want rather then anywhere in its row.
How do I get the number by clicking anywhere in its element?
So If I would click anywhere in the first row I would get the number 0 and if I would click anywhere in the second row I would get the number 1 with only Vanilla Javascript (No JQuery)?
Try this!
function setUnstakeNumber() {
let selection = document.getSelection();
// get selected row
let selectedRow = selection.anchorNode.parentNode.parentNode;
let index = selectedRow.childNodes[3].innerText;
console.log(index);
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
First get the selected row and then select the which includes the index.
My JS code looks like this. But when I open the page it says "Uncaught TypeError: Cannot set property 'innerHTML' of null"
I tried to change the NewItem constructor to a function. But VSC keeps saying I should declare it as a class instead. I converted it in the first place because the constructor wasn't working as a function either.
class NewItem {
constructor(name, date, price) {
this.itemName = name;
this.itemDate = date;
this.itemPrice = price;
}
}
const onListItem = new NewItem("John", "Date", "Price");
document.getElementById("demo").innerHTML = onListItem.itemDate;
HTML looks like this
<!DOCTYPE html>
<html lang= "en">
<head>
<link rel="stylesheet" href="ShopListStyle.css">
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<title>Shopping List</title>
</head>
<body>
<script src="ShopListScript.js"></script>
<div id="container">
<div id="inputbox" class="section">
<form id="labels-form">
<label><h2>Shopping List</h2></label>
<input id="labels-name" class="labels-input" type="text" value="Item Name"></input>
<input id="labels-date" class="labels-input" type="text" value="Date of Purchase"></input>
<input id="labels-price" class="labels-input" type="text" value="Item Price"></input>
<button id="labels-button">Add to List</button>
<p id="demo"></p>
</form>
</div>
<div id="shopListBox" class="section">
<!--Need to add a delete button/ Maybe a quantity button down the road-->
<table id="shopList">
<caption><h2>Spending List</h2></caption>
<thead id="table-header">
<tr>
<th class="table-header" id="table-name">name</th>
<th class="table-header" id="table-date">date</th>
<th class="table-header"id="table-price">price</th>
<th class="table-header" id="table-delete">delete</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="newRow">
<td class="new-item" id="item-name">item</td>
<td class="new-item" id="item-date">item</td>
<td class="new-item" id="item-price">item</td>
<td class="new-item"><button class="item-button">Delete</button></td>
</tr>
</tbody>
<tfoot id="table-footer">
<tr>
<td id="item-price-sum" colspan="4" style="width: 100%" >Sum of Prices</td>
</tr>
</tfoot>
</table>
<!--The sum of all the prices will go somewhere here-->
</div>
</div>
</body>
</html>
Your JavaScript code is trying to access this element with id demo (<p id="demo"></p>):
document.getElementById("demo").innerHTML = onListItem.itemDate;
Your script is added at the opening body tag...
<body>
<script src="ShopListScript.js"></script>
...
...which means the demo element does not exist yet.
Solution: Put your script before the closing body tag:
...
<script src="ShopListScript.js"></script>
</body>
</html>
You can also try to set
<script src="ShopListScript.js" defer="defer"></script>
Because javascript will block the DOM rendering, so we should put in the end of
like Peter Krebs's answer:
...
<script src="ShopListScript.js"></script>
</body>
I have 2 tables and every row has own button for deleting itself :
<table class="table" id="Offers">
<tr id="row1">
<td><button type="button" id=1 class="removeOffer">X</button</td>
</tr>
</table>
<table class="table" id="OffersHistory">
<tr class="History1">
<td><button type="button" id=1 class="removeOfferHistory">X</button</td>
</tr>
</table>
And two simple JQuery code, for every table , serving for remove :
$(document).on('click', '.removeOffer', function(){
var button_id = $(this).attr("id");
$('#row'+button_id).remove();
});
$(document).on('click', '.removeOfferHistory', function(){
var button_id = $(this).attr("id");
$('.History'+button_id).remove();
});
When i click on "X" button in the first table, it works fine. Row from first table is removed... But when i click on "X" button from second table, it removes row from second and first at the same time. Same row with same number from both tables are removed.. Why?
Firstly, it's invalid HTML to have multiple elements with the same id.
But, you could simplify your code massively by using the power of jQuery...
$(function(){
$("button").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First Row</td>
<td><button>X</button></td>
</tr>
<tr>
<td>Second Row</td>
<td><button>X</button></td>
</tr>
</table>
Both buttons have an ID of 1, change the ID or call the javascript function within the button
Not sure you need to do this much coding.
You can simply do it by : -
$(document).ready(function() {
$('button').click(function() {
$(this).remove();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Remove button</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button class="first" value="button1">button1</button>
<button class="first" value="button1">button2</button>
</body>
</html>
I want to make a table, based on this model (Material Design Lite) :
https://getmdl.io/components/index.html#tables-section
In my code, I have a list, and I try to display it, in the following way, by using a ng-repeat :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
But the result is not the same than in the illustration example :
As we can see, there is no checkbox on the left and I don't understand why.
Also, how to make a table, where we can directly add data on it ?
In fact, with a fixed list, it works. But mine is generated by a request in a database, and its value can be changed. My listadmin is empty at the beginning, and it is completed by an authentification process.
Your code work correct.
<html ng-app="myApp">
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script>
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.listAdmins = ['admin1', 'admin2', 'admin3'];
}]);
</script>
</head>
<body ng-controller="MainController as main">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
May be some errors occurred? Can you see browser console.
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>