I'm working on a real-time timetable for a school, for that I've an admin panel with a side "User verwalten" (manage users) where I manage the rights and permissions of the individual users. I want to create a table with the name and checkbox where you can mark the rights with a cross.
The data for this(all users and there permissions) are located on a webserver.
The Problem:
Now I have added the table-header and I want to add the users. But now with the table-header everything gets added in the first column and I dont know why. When I debugged, it is found that the cells are added in the right row but if I add the row it looks like this:
But i want it to look like this but with a table-header:
Here is the code for createTable()
function createTable(json){
var obj = JSON.parse(json);
var oldBody = document.getElementsByTagName('tbody')[0];
var body = document.createElement('tbody');
//if i add this header everything gets desroyed
//var header = document.getElementById("header").innerHTML = '<tr><th class="header"><h3>Name</h3></th><th class="header"><h3>Schüler verwalten</h3></th><th class="header"><h3>Benutzer verwalten</h3></th><th class="header"><h3>History anschauen</h3></th><th class="header"><h3>Home verwalten</h3></th></tr>';
for (var j = 0; j < obj.length; j++) {
var row = addRow(obj[j]);
row.classList.add('row');
//table.appendChild(body);
}
}
code foraddRow()
function addRow(val) {
var tr = document.createElement('tr');
for( var i = 0; i < 5; i++){
if(i==0){
var name = val.substr(0,(val.length)-9);
addCell(tr, null,name);
}else{
var rest = val.substr((val.length)-9, val.length);
var values = rest.split(";");
addCell(tr, values[i], name);
}
table.appendChild(tr);
}
return tr;
}
code for addCell()
function addCell(tr, val, name) {
var name;
var cell = document.createElement('input');
var value = "get";
if(val == null){
cell.classList.add("name")
cell.value = name;
cell.addEventListener("dblclick", function () {
cell.classList.remove('cell');
cell.classList.add('selected');
clearSelection();
});
}else if(val == 0){
cell.classList.add('checkbox');
cell.type = "checkbox";
cell.checked = false;
cell.addEventListener( 'change', function() {
value += getString();
getData(value);
});
}else if(val == 1){
cell.classList.add('checkbox');
cell.type = "checkbox";
cell.checked = true;
cell.addEventListener( 'change', function() {
value += getString();
getData(value);
});
}
tr.appendChild(cell);
}
I think you need to set a newStartIndex var.
Something like this is what I did. (If I understand correctly)
I realize this might not be exactly what you are asking but perhaps it points you in the right direction.
var ucfIndex = 2;
const ucfSelectedRowIndex = rows.indexOf(feedbackCandidates[x]) + ucfIndex;
var sheets = google.sheets({ version: 'v4' });
authorize(function () {
var request = {
spreadsheetId: 'yourSheetId',
valueInputOption: 'RAW',
resource: {
"data": [
{
"range": "N" + ucfSelectedRowIndex,
"majorDimension": "COLUMNS",
"values": [
[
true
],
]
},
],
},
auth,
};
sheets.spreadsheets.values.batchUpdate(request, function (err, response) {
if (err) {
console.error(err);
return;
}
else {
console.info(response);
console.log("Col Values updated");
};
});
});
Code for Add row
var table = document.getElementById("tbl");
for (var i = 0 ; i < table.rows.length; i++) {
var row = "";
for (var j = 0; j < table.rows[i].cells.length; j++) {
row += table.rows[i].cells[j].innerHTML;
row += " | ";
}
alert(row);
}
Related
I have a question. When querying my Json object, although i have my Field as same name and all Json rows available give me an error that is undefined.
//e.g: row.DepParentId
Bellow is my code. Am I missing some tag?
function convert(rows) {
debugger;
function exists(rows, parent) {
for (var i = 0; i < rows.length; i++) {
if (rows[i].DepId === parent) return true;
}
return false;
}
var nodes = [];
// get the top level nodes
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (!exists(rows, row.DepParentId)) {
nodes.push({
id: row.DepId,
name: row.Title
});
}
}
var toDo = [];
for (var i = 0; i < nodes.length; i++) {
toDo.push(nodes[i]);
}
while (toDo.length) {
var node = toDo.shift();
// the parent node
// get the children nodes
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.DepParentId == node.Id) {
var child = {
Id: row.DepId,
Name: row.Title
};
if (node.options) {
node.options.push(child);
} else {
node.options = [child];
}
toDo.push(child);
}
}
}
return nodes;
}
My Json example for one row picked from Firefox
"{"DepId":7,"DepParentId":3,"Title":"OTT"}"
Thanks for helping
Joao
thanks all for helping, it's working now, the problem was the JSON.stringify() was returning only an [Object] so when you use JSON.parse() generates a sintax error.
function onLoaded() {
var itemsCount = items.get_count();
for (var i = 0; i < itemsCount; i++) {
var item = items.itemAt(i);
var dep = JSON.stringify(item.get_fieldValues());
deps.push(dep);
}
So, i had to change the format to be valid to parse like this
var dt = "[" + deps + "]";
var ret = JSON.parse(dt);
Thanks
Joao
function Search_Gridview(strKey, strGV) {
var strData = strKey.value.toLowerCase().split(" ");
var tblData = document.getElementById(strGV);
var rowData;
for (var i = 1; i < tblData.rows.length; i++) {
rowData = tblData.rows[i].innerHTML;
var styleDisplay = 'none';
for (var j = 0; j < strData.length; j++) {
if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
styleDisplay = '';
else {
styleDisplay = 'none';
break;
}
}
tblData.rows[i].style.display = styleDisplay;
}
}
i have a gridview and i want to add search filter on it. This code works correctly but search just one page not all rows. How i make this, i discovered but i didn't solve this.
I need to sort list strings under the table ,so for that i have written following lines of code but on console i am not getting any values:
var j = 9;
var rows = element.all(by.repeater('row in renderedRows'));
var column = element.all(by.repeater('col in renderedColumns'));
expect(rows.count()).toEqual(5); //here its printing number of rows
expect(column.count()).toEqual(5); //here its printing number of columns
var arr = [rows.count()];
for (var i = 0; i < rows.count(); i++) {
console.log("aai" + i);
if (i = 0) {
//var columnvalue=column.get(9).getText();
var columnvalue = column.get(9).getText().then(function(ss) {
return ss.trim();
arr[i] = ss.trim(); //here it will save the value first value of column
console.log("value1" + arr[i]);
expect(arr[i]).toEqual('DN');
console.log("aa" + ss.trim());
});
} else {
var j = j + 8;
var columnvalue = column.get(j).getText().then(function(ss) {
return ss.trim();
arr[i] = ss.trim(); //here it will save the other values of column
console.log("value" + arr[i]);
expect(arr[i]).toEqual('DN');
console.log("ab" + ss.trim());
});
}
}
Sorting_Under_Table: function(col){
test = [];
var m;
var dm = 0;
element(by.xpath('//div[#class="ngHeaderScroller"]/div['+col+']')).click();
element.all(by.repeater('row in renderedRows')).then(function(row) {
m = row.length;
for (i = 1; i <= row.length; i++)
{
user_admin_table_name = browser.driver.findElement(by.xpath('//div[#class="ngCanvas"]/div['+i+']/div['+col+']'));
user_admin_table_name.getText().then(function(text) {
var test_var1 = text.toLowerCase().trim();
test.push(test_var1);
var k = test.length
if (k == m){
for (j = 0; j < test.length; j++){
test.sort();
d=j+1;
user_admin_table_name1 = browser.driver.findElement(by.xpath('//div[#class="ngCanvas"]/div['+d+']/div['+col+']'));
user_admin_table_name1.getText().then(function(text1) {
var test_var2 = text1.toLowerCase().trim();
if (test_var2 == test[dm]){
expect(test_var2).toEqual(test[dm]);
dm = dm +1;
}else {
expect(test_var2).toEqual(test[dm]);
log.error("Sorting is not successful");
dm = dm +1;
}
});
}
}
});
}
});
},
You can use this code for sorting and verifying is it sorted or not
I'm not sure how your above example is doing any sorting, but here's a general solution for trimming and then sorting:
var elementsWithTextToSort = element.all(by.xyz...);
elementsWithTextToSort.map(function(elem) {
return elem.getText().then(function(text) {
return text.trim();
});
}).then(function(trimmedTexts) {
return trimmedTexts.sort();
}).then(function(sortedTrimmedTexts) {
//do something with the sorted trimmed texts
});
http://jsfiddle.net/84nv2dmL/
I'm trying to get these images of letters to display in order. I tried creating divs dynamically and filling them with the img, but that didn't work. How can I get these letters to display in order?
jsfiddle code:
function getQueryStringVar(name){
var qs = window.location.search.slice(1);
var props = qs.split("&");
for (var i=0 ; i < props.length;i++){
var pair = props[i].split("=");
if(pair[0] === name) {
return decodeURIComponent(pair[1]);
}
}
}
function getLetterImage(tag){
var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
return $.getJSON( flickerAPI, {
tags: tag,
tagmode: "all",
format: "json"
})
.then(function (flickrdata) {
//console.log(flickrdata);
var i = Math.floor(Math.random() * flickrdata.items.length);
var item = flickrdata.items[i];
var url = item.media.m;
return url;
});
}
$(document).ready(function() {
var name = getQueryStringVar("name") || "Derek";
var str = "letter,";
var searchtags = new Array()
for (var i = 0; i < name.length; i++) {
//console.log(str.concat(searchtags.charAt(i)));
searchtags[i] = str.concat(name.charAt(i));
}
for (var j = 0; j < name.length; j++){
var request = getLetterImage(searchtags[j]);
request.done(function(url) {
$("body").append("<img src="+ url + "></img>");
//var ele = document.createElement("div");
//ele.setAttribute("class", "img" + j--);
//document.body.appendChild(ele);
//$("<img src="+ url +"></img>").appendTo("img"+j);
});
}
//$("#img"+i).html("<img src="+ url + "></img>");
});
You basically need to keep track of the order that you are appending your images to the DOM, and make sure that they are in sync with the letters in the name. Created a fiddle with a fix. Comments are in line:
http://jsfiddle.net/84nv2dmL/2/
function getQueryStringVar(name) {
var qs = window.location.search.slice(1);
var props = qs.split("&");
for (var i = 0; i < props.length; i++) {
var pair = props[i].split("=");
if (pair[0] === name) {
return decodeURIComponent(pair[1]);
}
}
}
function getLetterImage(tag) {
var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
return $.getJSON(flickerAPI, {
tags: tag.char,
tagmode: "all",
format: "json"
})
.then(function(flickrdata) {
//console.log(flickrdata);
var i = Math.floor(Math.random() * flickrdata.items.length);
var item = flickrdata.items[i];
var url = item.media.m;
// return an object with url AND index
return {
ind: tag.ind,
img: url
};
});
}
$(document).ready(function() {
var name = getQueryStringVar("name") || "Derek";
var urls = new Array(name.length); // array or URLs, in correct order
var urlCounter = []; // keeps count or URLs received
var str = "letter,";
var searchtags = new Array();
for (var i = 0; i < name.length; i++) {
searchtags[i] = {
char: str.concat(name.charAt(i)),
ind: i
};
}
for (var j = 0; j < name.length; j++) {
var request = getLetterImage(searchtags[j]);
request.done(function(url) {
// when request is done, place image url in 'urls' array, in the correct order
urls[url.ind] = url.img;
// push object to the counter array, just to keep count
urlCounter.push(url);
// check if all image urls have been collected
checkComplete();
});
}
function checkComplete() {
// if the number of URLs received is equal
// to the number of characters in the name
// append the images from the ordered array
if (urlCounter.length == name.length) {
for (var k = 0; k < urls.length; k++) {
$("body").append("<img src=" + urls[k] + "></img>");
}
}
}
});
$("#div_id").append("<img src="+ url + "></img>");
Here div_id is the id you gave to the div.
Append adds img tag with source src to it.
Please give the html code too along with the script to help understand the problem better
window.onload = function() {
var r = 0,
c = 0;
for (x in localStorage) {
var row = table.insertRow(r),
obj = JSON.parse(localStorage.getItem(x));
for (i in obj) {
var cell = row.insertCell(c);
cell.innerHTML = obj[i];
c += 1
}
r += 1;
c = 0;
}
for (var a = 0; a < table.length; a += 1) {
}
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[2].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[3].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
};
This code on load loops through the saved local storage JSON objects and then prints them into a table each object takes a row and the values are in the cells what i want is to be able to click and edit each of these rows this code only works for the first row and not the others so what should i do?
Put your code inside the for loop
for (var a = 0; a < table.length; a++) {
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
//more table.rows.....
}
Using jQuery is very simple:
$(function(){
$('table td').click(function(){
var ask = prompt("Input");
$(this).html(ask);
});
});
You add event outside of the loop
for (var a = 0; a < table.length; a += 1) {
for(var j=0;j<3;j++){
table.rows[a].cells[j].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
}
}