I want to print the data of an object in the form of a table using javascript. The code I have written does not display anything. Please tell me what am I doing wrong here.
Here is the code i wrote-
function Movie(id,movieName)
{
this.id = id;
this.movieName = movieName;
}
function MoviesWatched()
{
this.movies = new Array();
}
MoviesWatched.prototype.addMovie = function(id,name)
{
this.movies[id]=new Movie(id,name);
}
MoviesWatched.prototype.getTable = function()
{
var movie;
var table="<table border=1>";
for(movie in this.movies)
{
table += "<tr><td>";
table += movies[movie].id;
table += "</td><td>";
table += movies[movie].name;
table += "</td></tr>";
}
table += "</table>";
return table;
}
var myList=new MoviesWatched();
myList.addMovie(1,"Inception");
myList.addMovie(2,"Red");
document.write(myList.getTable());
In your getTable function, you need to change movies to this.movies and change name to movieName
var movie;
var table="<table border=1>";
for(movie in this.movies)
{
table += "<tr><td>";
table += this.movies[movie].id;
table += "</td><td>";
table += this.movies[movie].movieName;
table += "</td></tr>";
}
http://jsfiddle.net/fenderistic/9Gzdv/1/
Related
I am trying to work on electron and made a simple dashboard GUI. i am a beginner in node js and electron.
Problem:
in my main gui.html: i have a table is being loaded, and from that table i need to select the rows from checklist for which i have made a js script:
script in read_checklist.js, this is taking the input checkbox element and selecting the whole row, which will later be shown after some processing in the textarea.
var checkboxes = document.getElementsByTagName("input");
var select_all = document.getElementById("allcb");
var warn_code = Array();
var family_array = Array();
var fail_drive_array = Array();
var waiverMap = {};
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var Warn_Code = currentRow.getElementsByTagName("td")[0];
var Family = currentRow.getElementsByTagName("td")[1];
var failing_drive = currentRow.getElementsByTagName("td")[3];
warn_code.push(Warn_Code.textContent);
family_array.push(Family.textContent);
fail_drive_array.push(failing_drive.textContent);
console.log('server started!' + currentRow );
alert(currentRow.textContent);
};
}
I am trying to import this in my gui.html like this:
This is where the table is getting displayed (code for this is below and it is stored in the renderer.js)
<!--This is for the table-->
<div id="data_lib" class="table-responsive">
</div>
<script type="text/javascript" src="./read_checklist.js"></script>
<!--This is for the table-->
My table is coming from another file, renderer.js
$(document).ready(function(){
var data;
$.ajax({
type: "GET",
url: "/Users/mrimat01/Desktop/CODE/electron_QAB_GUI_main/GUI/data.csv",
dataType: "text",
success: function(response)
{
data = $.csv.toArrays(response);
generateHtmlTable(data);
}
});
function generateHtmlTable(data) {
var html = "<table id='big_tables' class='table table-striped table-bordered' method='GET'>";
if(typeof(data[0]) === 'undefined') {
return null;
} else {
$.each(data, function( index, row ) {
//bind header
if(index == 0) {
html += '<thead>';
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<th>';
html += colData;
html += '</th>';
});
html += '<th>';
html += "<input type='checkbox' id='allcb' name='allcb'/>Select";
html += '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
} else {
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<td>';
html += colData;
html += '</td>';
});
html += '<td>';
html += "<input id='name' type='checkbox' name='name' value='name' /> ";
html += '</td>';
html += '</tr>';
}
});
html += '</tbody>';
html += '</table>';
$('#data_lib').append(html);
}
}
});
I can see the table getting generated but read_checklist.js desn't work.
If i try to do the same thing in console, it works perfectly.
i have gone through many SO answers but couldn't seem to make this work.
Things i have tried:
making node_integration: true
using
module = undefined;}</script>
<script>if (window.module) module = window.module;</script>
adding the script directly below root <div>
i have a little problem with my code, i have a object and i have a error Paginator.validate is not a function, i call the method validate() from another method in the same scope of the Object, the code below, i really appreciate your help :D, cheers!
function Paginator(res){
this.total = res['data']['TotalRegistros'];
this.resPorPagina = res['data']['RegistrosPorPagina'];
this.pagActual = res['data']['PaginaActual'];
this.registros = res['data']['Registros'];
this.paginas = function(){
return Math.round(this.total/this.resPorPagina);
}
this.render = function() {
var table;
$.each(this.registros,function(index,element){
table += '<tr>';
$.each(element,function(i,e){
table += '<td>' + Paginator.validate(e) + '</td>';
})
table += '</tr>';
});
return table;
}
this.validate = function(e){
if(e == null || e == false){e = 'Sin Info';}
return e;
}
this.paginator = function(){
var b = '';
for (var i=1;i<=Paginator.paginas();i++) {
active = (this.pagActual === i)?'active':'';
b += '<li class="'+active+'"><a class="btn_paginate" href="#" data-page="'+i+'">'+i+'</a></li>';
}
return b;
}
}
var res = //i get the data from a ajax call in PHP
// object Paginate
var Paginate = new Paginator(res);
// object Paginate
$('#reportsTable tbody').append(Paginate.render());
$('.paginate').find('ul').html(Paginate.paginator());
The problem is that the context of this within the jquery function will not be the Paginator. You'll need to create a reference to this somewhere. Try:
this.render = function() {
var table;
var self = this;
$.each(this.registros,function(index,element){
table += '<tr>';
$.each(element,function(i,e){
table += '<td>' + self.validate(e) + '</td>';
})
table += '</tr>';
});
return table;
}
I have multiple XML files which contain TV Listings each file is one TV channel. I want to be able to search by program title and display the results in a html table. So far I have been able to search by one XML file - so by one channel. I want to be able to search by multiple channels using user input via an input box and search button. The XML I have looks like:
<?xml version="1.0" encoding="UTF-8"?>
<channel id="sky_one" source="Sky" date="25/11/2014">
<programme>
<desc>Tony's motorcycle bursts into flames between his legs while town planner Liz is left in agony after her half-tonne horse bolts and lands on top of her. Also in HD</desc>
<title>The Real A & E</title>
<end>0630</end>
<start>0600</start>
</programme>
(only a snippet)
The jQuery that I have so far, which works for one channel looks like:
$(document).ready(function () {
//GLOBAL VAR
var keyword = '';
var pub = '';
var i = 0;
$("#searchButton").click(function () {
keyword = $("input#term").val();
//Reset any message
var errMsg = '';
pub = '';
if (keyword == '') {
errMsg += 'Please enter a search term';
} else {
searchThis();
}
if (errMsg != '') {
pub += '<div class="error">';
pub += errMsg;
pub += '</div>';
}
//Show error
$('#result').html(pub);
});
// ----------------------------------------- SKY NEWS -----------------------------------------------------------
function searchThis() {
$.ajax({
type: "GET",
url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
dataType: "xml",
success: function (xml) {
loadPublication(xml)
}
});
}
function loadPublication(xmlData) {
i = 0;
var row;
var searchExp = "";
$(xmlData).find('programme').each(function () {
var title = $(this).find('title').text();
var desc = $(this).find('desc').text();
var start = $(this).find('start').text();
//Format the keyword expression
var exp = new RegExp(keyword, "gi");
//Match to Title of programme
searchExp = title.match(exp);
if (searchExp != null) {
//Start building the result
if ((i % 2) == 0) {
row = 'even';
} else {
row = 'odd';
}
i++;
pub += '<tr class="row ' + row + '">';
pub += '<td valign="top" class="col1">' + title + '</td>';
pub += '<td valign="top" class="col2">' + desc + '</td>';
pub += '<td valign="top" class="col3">' + start + '</td>';
pub += '</tr>' + 'n';
}
});
if (i == 0) {
pub += '<div class="error">';
pub += 'No Result was Found';
pub += '</div>' + 'n';
//Populate the result
$('#result').html(pub);
} else {
//Pass the result set
showResult(pub);
}
}
function showResult(resultSet) {
//Show the result
pub = '<div class="message">There are ' + i + ' results!</div>';
pub += '<table id="grid" class="table-bordered">';
pub += '<thead><tr>' + 'n';
pub += '<th class="col1"> </th>';
pub += '<th class="col2">Title</th>';
pub += '<th class="col3">Desc</th>';
pub += '<th class="col4">Start</th>';
pub += '</tr></thead>';
pub += '<tbody>';
pub += resultSet;
pub += '<hr class="horule" />';
pub += '</tbody>';
pub += '</table>';
//Populate
$('#result').html(pub)
}
});
And the html is as follows:
<input type="text" id="term" placeholder="Search by program title..."></div>
</div>
<input type="button" id="searchButton" value="Search" class="btn btn-primary" />
<div id="result"> </div>
I had an the idea of using the xml files as variables then using .when and .then to utilize the xml files, although I am not quite sure how to implement these, something like:
// Open the xml file
var sky1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml',
bbc1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/bbc1.xml',
skyn = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_news.xml';
$.when(
$.ajax( sky1 ),
$.ajax( bbc1 ),
$.ajax( skyn )
).then(function( skyone, bbcone, skynews ) {
var sky1p = $(skyone).find('programme'),
bbc1p = $(bbcone).find('programme'),
skynp = $(skynews).find('programme');
//sky one
sky1p.each(function() {
//DO Search
//sky one
skynp.each(function() {
//DO Search
//sky one
bbcp.each(function() {
//DO Search
The intended output is a html table with the title, description and program time. If anyone could help that would be great!
I have two dynamic tables, one with the results of a sum and on other with the sum value, example: 4 and 2+2.
I have the following code in javascript where I click on the table with sum value, and then click on the respective sum value, and when I click on the right sum value, I want to know the value of the index on the column and row of the cell that was clicked.
I have eventListeners to create the clickable cells, and then compare with the cells of the other table.
Here is the code for the clickable cell of the first table:
var handler = function(e){if (choiceFlagElement != null) {
choiceFlagElement.style.background = 'green';
}
choiceFlagElement = e.target;
choiceFlagNumber = parseInt(e.target.innerHTML);
e.target.style.background = 'green';
}
and then I have this part for compare to the above cell:
var handler2 = function(e){
if (choiceFlagElement == null) {
return;
}
if (choiceFlagNumber == eval(e.target.innerHTML)) {
e.target.style.background = 'green';
e.target.style.visibility= 'hidden';
choiceFlagElement.style.visibility = 'hidden';
pontuacao();
inicio=Date.now();
count++;
choiceFlagNumber.target.innerHTML="-1";
}
}
Here is where I create the two table:
function criartabela(tamanho){
var tbl = "<table id=tabela>";
var tbl2 = "";
var resultados = new Array();
var f=0;
for (var ri = 0; ri < tamanho ; ri++) {
tbl += "<tr>";
for (var ci = 0; ci < tamanho; ci++) {
contas();
tbl += "<td class='cel"+tamanho+"' id=x visibility=visible >" + a + "+" + b + "</td>";
var total = a+b;
resultados[f]=total;
f=f+1;
}
}
resultados.sort(function(a,b){return a - b});
for(y=0; y<resultados.length; y++){
tbl2 += "<div class='resul"+tamanho+"' id=total >"+ resultados[y] + "</div>";
}
tbl += "</tr>";
tbl += "</table>";
document.getElementById("tabelap").innerHTML = tbl;
document.getElementById("resposta").innerHTML = tbl2;
}
I want to add a new row to my JSON when the user clicks a link. Here's my javascript: It's not erroring, but I am not getting updated JSON in my alert.
$(document).ready( function(){
people = {
"COLUMNS":["NAME","AGE"],
"DATA":[
["Jon","16"],
["Jerry","23"]
]
}
members = people.DATA;
var nc = "<table border=1 width=500><tr><td>name</td><td>age</td><td></td></tr>";
for(var i=0;i<members.length;i++)
{
nc+= '<tr><td>' + members[i][0] + '</td>';
nc+= '<td>' + members[i][1] + '</td>';
nc+= '<td>add a new person</td></tr>';
}
nc += "</table>";
$("#result").html(nc);
$(".addlink").click( function(){
// add another row to our JSON
people.DATA['NAME'] = "new";
people.DATA['AGE'] = "99";
alert(people.DATA);
return false;
});
});
That's not JSON, it's a Javascript object.
To add another item in the array, you create an array and add to it, as it is an array of arrays:
people.DATA.push(["new", "99"]);