I m trying to delete the table after all the rows deleted but somehow i cant check if table has children after deleting all the rows.
I dont understand why looking for the child elements length doesnt work here ? any suggestions ?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>table manipulation </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="..//jquery-2.1.3.min.js"></script>
<script src="table.js" type="text/javascript"></script>
</head>
<body>
<table id = "table1">
<tr id = "1">
<td id = "information1"> i m the first row !</td>
<td><button id = "button1" class = "buttonclass" onClick="reply_click(this.id)"> destroy ! </button></td>
</tr>
<tr id = "2">
<td id = "information2"> i m the second row !</td>
<td><button id = "button2" class = "buttonclass" onClick="reply_click(this.id)"> destroy ! </button></td>
</tr>
<tr id = "3">
<td id = "information3" > i m the third row !</td>
<td><button id = "button3" class = "buttonclass" onClick="reply_click(this.id)"> destroy ! </button></td>
<tr id = "4">
<td id = "information4" > i m the fourth row !</td>
<td><button id = "button4" class = "buttonclass" onClick="reply_click(this.id)"> destroy ! </button></td>
</tr>
</table>
<div id = "newtable"> </div>
</body>
</html>
var id ;
var table = $('<table></table>').addClass('foo');
function destroy(){
var theParent = document.querySelector("#table1");
var parent = $("#" + id).parent();
$("#" + id).fadeOut( "slow", function() {
$(parent).closest('tr').remove();
alert(theParent.innerHTML);
});
var row = $('<tr</tr>').addClass('bar').text(parent.siblings().html());
table.append(row);
$("#newtable").append(table);
parent.siblings().remove();
theParent.addEventListener("click", doSomething, false);
}
function doSomething(e) {
if($("#table1").children().length < 1 ){
theParent.remove();
}
}
function reply_click(clicked_id)
{
id = clicked_id;
destroy();
}
function doSomething(e) {
if($("#table1 tr").length <= 1 ){
theParent.remove();
}
}
This will help you
You can try this instead:
if($("#table1").find('tr').length < 1 ){
theParent.remove();
}
Browsers will usually add <tbody> and<thead> tags into a table even if they aren't in your HTML, so the rows aren't the only children. The code above just looks for rows.
Related
data variable's is 500. This variable has 500 ID of top stories of Hackers News.
and I am trying to add tr elements which shows the title of each ID and rank.
There is no problem if I only add one ID in the loop.
However, if I use more than one ID then the new tr element just replace the old tr element.
I wanted to display 500 top sorties but it only shows one story as you can see.
Is there any way to show 500 stories?
var itemlist = document.querySelector('.itemlist'); //tbody elements
var request = new XMLHttpRequest()
request.open('GET', 'https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty', true)
request.onload = function() {
// begin accessing JSON data here
var data = JSON.parse(this.response);
for (var j = 0; j < data.length; j++) {
var temp = data[j];
var id = 'https://hacker-news.firebaseio.com/v0/item/' + temp + '.json?print=pretty';
request.open('GET', id, true)
request.onload = function() {
var data = JSON.parse(this.response);
var tr = document.createElement('tr');
var td = document.createElement('td');
var td1 = document.createElement('td');
td.id = temp;
td.textContent = (j) + '.';
td1.textContent = data.title;
tr.appendChild(td);
tr.appendChild(td1);
itemlist.appendChild(tr);
console.log(id);
}
request.send();
}
}
request.send();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<table class="main" width="85%">
<tbody>
<tr>
<td bgcolor="#ff6600">
<table style="padding:2px;">
<tbody>
<tr>
<td style="width:18px;">
<a href="https://news.ycombinator.com/">
<img src="https://news.ycombinator.com/y18.gif" class="ylogo">
</a>
</td>
<td style="line-height:12px;height:10px">
<span class="mainmenu">
<span style="margin-right:7px;">
Hacker News
</span>
new
|
past
|
comments
|
ask
|
show
|
jobs
|
submit
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="pagespace"></tr>
<tr>
<td>
<table>
<tbody class="itemlist">
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>
I'm just starting Angular JS and trying to have a scrollbar appearing as I add an element in the list which would be populated in the box of the contents.
I installed ng-scrollbar from here. https://github.com/asafdav/ng-scrollbar
HTML:
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
JavaScript:
(function () {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
It's part of my code so it might not fully make sense. But the way it works is that if I pressed the addImageButton, it would add a row which will add a row on the web. And conversely, removeImageButton will delete a row which will show on the web immediately. I need a scroll bar appearing once it reaches the height 100px. I checked the last answer of the ng-scrollbar is not working with ng-repeat
as well but it didn't work. Would be great if I could get some help with the detailed explanation. :) Thanks!
Figured out! I need to put the broadcast method in addRow and removeRow methods. Also, I had to put the out from the
When I enter the value of the textbox has to be "" and the color has to be red. I have to use the same function for three textboxes. When I use document.getelementsbyclassname() my function won't work. Am I doing something wrong?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>
<title>DOMoef01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function roodVerdwijn(){
document.getElementsByClassName('text1').value="";
document.getElementsByClassName('text1').style.color = "Red";
document.getElementsByClassName('text1').style.background = "White";
}
function gedaan(){
document.getElementByClassName('text1').style.color = "Black";
document.getElementByClassName('text1').style.background = "Gray";
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="2">persoonlijke gegevens</td>
</tr>
<tr>
<td>voornaam</td>
<td><input type="text" value="voornaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td>achternaam</td>
<td><input type="text" value="achternaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td>adres</td>
<td><input type="text" value="adres" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td><input type="button" value="verzenden" onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
<td><input type="button" value="alles wissen"></td>
</tr>
</table>
</body>
</html>
I've tried to fix it with this code but it still won't work:
function roodVerdwijn(){
var elements = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements.value="";
elements.style.color = "Red";
elements.style.background = "White";
}
}
function gedaan(){
var elements2 = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements2.style.color = "Black";
elements2.style.background = "Gray";
}
}
it kinda helped, but when I focus on one textbox, the value of all 3 textboxes are "". I want to focus on only one textbox. This is what i've changed:
function roodVerdwijn(){
var elements = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements[i].value="";
elements[i].style.color = "Red";
elements[i].style.background = "White";
}
}
function gedaan(){
var elements2 = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements2[i].style.color = "Black";
elements2[i].style.background = "Gray";
}
}
Get elements by class name returns an array of element. You have to loop each element or if you are sure that there's only one element for the class you have look for, use [0].
document.getElementsByClassName('text1')[0].value ...
I fixed it :
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>
<title>DOMoef01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function roodVerdwijn(id){
var elements = document.getElementById(id);
elements.value="";
elements.style.color = "Red";
elements.style.background = "White";
}
function gedaan(id){
var elements2 = document.getElementById(id);
elements2.style.color = "Black";
elements2.style.background = "Gray";
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="2">persoonlijke gegevens</td>
</tr>
<tr>
<td>voornaam</td>
<td><input type="text" value="voornaam" id="1" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
</tr>
<tr>
<td>achternaam</td>
<td><input type="text" value="achternaam" id="2" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
</tr>
<tr>
<td>adres</td>
<td><input type="text" value="adres" id="3" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
</tr>
<tr>
<td><input type="button" value="verzenden" onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
<td><input type="button" value="alles wissen"></td>
</tr>
</table>
</body>
</html>
Below is a form when submitted displays the content in a table.
What works
Content is successfully transferred via form to table.
What is not working
I wanted to hide the table when the page loads and be displayed only after the form is submitted.
I tried #myTableData {visibility: hidden;} in css and then I tried plugging (.style.visibility="visible";) Javascript in my addtable function to display the table but it does not work. I am not sure if I am understanding this right.
Also how do I control the display of the table (like width, background color, font etc). I added (td.style.width = '200px'; but I don't see any changes).
CSS or JS for controlling table ?
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
1) In function addRow add table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData");.
2) To set styles like width you can can use setAttribute method.
document.getElementById('myTableData').setAttribute("style","width:200px");
Note: I can't see where you make use of addTable function, maybe this is why some of styles are not setted when you want.
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
table.style.visibility = "visible";
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
I don't have the rep to comment so I can't ask for details, but just in case you can use jquery, you can hide and show stuff like this:
$(function(){
$("#add").click(function() {
var name = $('#name').val();
var domain = $('#domain').val();
var url = $('#url').val();
$('#hidey').show();
$('#nametd').html(name);
$('#domtd').html(domain);
$('#urltd').html(url);
})
});
https://jsfiddle.net/6dxLsnL4/
Or trigger on form submit instead of click if you want, but there, you might want to consider ajax, because then you can make sure the form is processed on the server side before displaying the results.
I am trying to display a populated table on a html page using javascript.
This is what I have so far:
table.js - contains my function and data for the table
var ORDER = { orders: [] };
function Order(ref, grower, item) {
this.order_reference = ("o" + ref);
this.grower_reference = grower;
this.item_ordered = item;
}
var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);
function addTable(){
var table = document.createElement("TABLE");
table.setAttribute("id", "myTable");
document.body.appendChild(table);
for (var i=0; i<ORDER.length; i++) {
var row = document.createElement("TR");
var refCell = document.createElement("TD");
var growerCell = document.createElement("TD");
var itemCell = document.createElement("TD");
var ref = document.createTextNode(refArray[i]);
var grower = document.createTextNode(growerArray[i]);
var item = document.createTextNode(itemArray[i]);
refCell.appendChild(ref);
growerCell.appendChild(grower);
itemCell.appendChild(item);
table.appendChild(row);
}
}
html page
<!DOCTYPE html>
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body id="contracts">
<div id="wrapper">
<div id="mytable">
</div>
</div>
<div id="footer">
<table id= "footer" style="width: 100%">
<tr>
<td valign="bottom">Company Name <br> Tel Num <br> Location, Postcode</td>
<td> <button onclick="addTable()"> Click me </button></td>
<td align="right" valign="bottom"><a href="#">Home <a href="#">About <a href="#">Help <a href="#">Contact</td>
</tr>
</table>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
Firstly, I wanted to display the table on the click of a button. Secondly, I want to display the table as soon as the html page is loaded.
How would I go about this?
Sorry if its not a good question, or if there is lots missing. I'm quite new to this so sort of just using different tutorials and putting stuff together ...
You have a few problems:
In your loop for (var i = 0; i < ORDER.length; i++) { should be for (var i = 0; i < ORDER.orders.length; i++) {
refArray, growerArray, itemArray are undefined
You are not appending the tds to the tr
Be sure to look at https://developer.chrome.com/devtools/docs/javascript-debugging and to check your console for errors.
The following example adds the table after the page is loaded, and also when you click the button.
var ORDER = {
orders: []
};
function Order(ref, grower, item) {
this.order_reference = ("o" + ref);
this.grower_reference = grower;
this.item_ordered = item;
}
var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);
function addTable(orders) {
var table = document.createElement("TABLE");
table.setAttribute("id", "myTable");
document.body.appendChild(table);
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
var row = document.createElement("TR");
var refCell = document.createElement("TD");
var growerCell = document.createElement("TD");
var itemCell = document.createElement("TD");
row.appendChild(refCell);
row.appendChild(growerCell);
row.appendChild(itemCell);
var ref = document.createTextNode(order.order_reference);
var grower = document.createTextNode(order.grower_reference);
var item = document.createTextNode(order.item_ordered);
refCell.appendChild(ref);
growerCell.appendChild(grower);
itemCell.appendChild(item);
table.appendChild(row);
document.body.appendChild(document.createElement('hr'));
}
}
window.addEventListener('load', function() {
addTable(ORDER.orders)
});
<div id="wrapper">
<div id="mytable"></div>
<div id="footer">
<table id="footer" style="width: 100%">
<tr>
<td valign="bottom">Company Name
<br />Tel Num
<br />Location, Postcode</td>
<td>
<button onclick="addTable(ORDER.orders)">Click me</button>
</td>
<td align="right" valign="bottom">
Home About Help Contact
</td>
</tr>
</table>
</div>
</div>
<hr />
The first thing you need to consider, is that you can't add elements to the DOM until it has loaded.
Your addTable function builds the table and appends it to the <body> element. This needs to be called when the page is ready and the DOM has been loaded.
window.addEventListener('load', addTable);
However, I reckon that you probably don't want it to be attached to the bottom of the <body>? I'm guessing it should go inside <div id="mytable"></div>?
The following adjustments would allow for that behaviour.
var table = document.createElement("TABLE"),
container = document.getElementById('mytable');
table.setAttribute("id", "myTable");
container.appendChild(table);