I have a table with columns and rows and cells have an onclick handler.
<tr name="row1">
<td name="col1" onclick="f1(this)">
<td name="col2" onclick="f1(this)">
<td name="col3" onclick="f1(this)">
</tr>
The function f1 marks the cells as selected by the user. This has all worked as expected. I am trying to add the functionality that if a user has saved selections and then returns to the form, I can pre-select the correct cells saved by the user. So I wrote this function that I can call with values of row and col from the database.
function f2 (row, col) {
f1( $( 'tr[name=row'+row+']' ).find( 'td[name=col'+col+']' ) );
}
Only thing is, it doesn't work. If I construct the complete string, e.g.,
f1( $( 'tr[name=row1]' ).find( 'td[name=col2]' )[0])
then it works just fine. But it doesn't work in the page, and i'm guessing it has to do with incorrect quoting of the parameters, but I can't figure out how to correctly proceed. How do I construct programmatic calls to f1 ?
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<script>
function f2 (self) {
var col = self.attributes["name"].value;
var row = self.parentNode.attributes["name"].value;
alert(row + " " + col);
// do what you want
}
</script>
</head>
<body>
<table>
<tr name="row1">
<td name="col1" onclick="f2(this);">test1</td>
<td name="col2" onclick="f2(this);">test2</td>
<td name="col3" onclick="f2(this);">test3</td>
</tr>
</table>
</body>
</html>
Related
I have sample from Socket.io which is display price ticker of cryptocurrency. I try to find way to parse this socket to HTML table but still not find the resources. Here is the sample code using socket.io javascript :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'> open console </div>
</body>
<script type="text/javascript">
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg)
})
</script>
</html>
Here is sample of output string from above code :
{"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"}
I want to parse above value to HTML table like this :
<table>
<tr>
<td>COIN</td>
<td>EXCHANGE</td>
<td>MARKET</td>
</tr>
<tr>
<td>value coin here</td>
<td>value exchange here</td>
<td>value market here</td>
</tr>
</table>
Any idea how to parse json from socket to html table?? thanks for help.
The mere parsing into an HTML table is rather easy. Note, that the following code makes use of template strings. It also has no checks in place to verify the message or the existence of the table. So you might need to add those.
function toTable( msg ) {
document.getElementById( 'results' )
.insertAdjacentHTML( 'beforeend',
`<tr><td>${msg.coin}</td><td>${msg.exchange_id}</td><td>${msg.market_id}</td></tr>`
);
}
toTable( {"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"} );
<table id="results">
<tr>
<th>COIN</th>
<th>EXCHANGE</th>
<th>MARKET</th>
</tr>
</table>
On the other hand, updates will be more interesting, as you have to create a key for each entry and keep track of whether there already a row for that entry or not.
based on above answer, i just modify the code to make it work without adding new row. Here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'></div>
</body>
<script type="text/javascript">
function toTable( data ) {
document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.coin + "</td><td>" + data.exchange_id.toUpperCase() + "</td><td> " + data.market_id + "</td><td>" + data.message.msg.price + "</td></tr>";
}
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
//document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg);
toTable(tradeMsg);
})
</script>
</html>
<table border="1" id="results"></table>
I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
I have an interesting issue. I have a website which sends emails.
The email templates are often straight forward but for one client he wants me to convert content from his public website into email friendly html.
I want to not just solve the problem for his specific website but for other unknown websites.
So I remembered that you can run Razor as a template engine.
Long story short. It is working and working well.
My issue comes down to this. When someone edits the template with razor style for loops Ckeditor acts quite strangely.
Any idea how to keep CKEditor from screwing up?
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
The above code when saved in ckeditor removes the razor information and becomes an empty table
<table style="width: 100%;" width="100%">
<tbody></tbody>
</table>
The only way I can think of to achieve this would be to use html comments in conjunction with razor comments.
Initially you would author the razor template like so:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
#*<!--*#
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
#*-->*#
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
#*<!--*#
}
}
#*-->*#
</tbody>
</table>
</body>
</html>
The code above is valid and will render without error. But when you put it into the html editor it will be rearranged by the browser, so you will need to alter it just before it is displayed for editing so that the razor comments are removed and only the html comments remain.
So, once you have removed the razor comments by replacing all instances of #*<!--*# with <!-- and all instances of #*-->*# with --> you should have the following
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
<!--
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
-->
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
<!--
}
}
-->
</tbody>
</table>
</body>
</html>
This will render in the html editor and wont get mangled by the browser as pointed out by Alfonso, an example of this on jsfiddle http://jsfiddle.net/wPGLd/3/
Once the editing is complete you will need to capture the html and reapply the razor comments by replacing all instances of <!-- with #*<!--*# and all instances of --> with #*-->*#
Intercepting the html before and after it enters the ckeditor is fairly straight forward and well documented. I found the following article that explains a little about how to get the ckeditor content on submit
How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor
The following question also covers this
Update editor content immediately before save in CKEditor plug-in
You can't.
The browser will rearrange those contents: http://jsfiddle.net/wPGLd/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
alert(document.body.innerHTML)
}//]]>
</script>
</head>
<body>
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
</body>
</html>
I want to populate a list of Objects based on a HTML Table. Let's say I have the following class:
class Employee
{
String name;
String department;
num salary;
...methods
}
And in my HTML, I have the following table:
<table class="table" id="employeeTable">
<thead>
<tr>
<th>Name
<th>Departament
<th>Salary
<tbody id="employeeTableBody">
<tr>
<td> John
<td> 1
<td> 1500
<tr>
<td> Mary
<td> 2
<td> 2500
...etc
</table>
So, how do I query the table, get its rows, then get its cells to fill my List of Employees (in this case)?
I tried to use something like:
TableElement table = query("#employeesTable");
Element tableBody = query("#employeesTableBody");
But I couldn't find a proper method in TableElement or Element to return TableRowElement, or maybe the cells of it. I tried to get the children nodes also, but without sucess.
A pseudo-algorithm to fulfil this task would be something like this:
1. Get the table
2. For each row of the table
2.a Create a new Employee object based on the value of each cell of the row.
2.b Append this object to the Employee List.
3. End
Here the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scratchweb</title>
<link rel="stylesheet" href="scratchweb.css">
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Departament</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>1500</td>
</tr>
<tr>
<td>Mary</td>
<td>2</td>
<td>2500</td>
</tr>
</table>
<script type="application/dart" src="web/scratchweb.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Here's the Dart:
import 'dart:html';
import 'dart:math';
class Employee {
String name;
String department;
num salary;
Employee({this.name, this.department, this.salary});
String toString() => '<employee name="$name" department="$department" salary="$salary">';
}
void main() {
var employees = new List<Employee>();
var table = query("table#employeeTable");
for (TableRowElement row in table.rows) {
if (row.cells.length != 3) {
print("Malformed row: $row");
continue;
}
if ((row.cells[0] as TableCellElement).tagName == "TH") {
print("Skipping header");
continue;
}
var cells = row.cells;
var employee = new Employee(
name: cells[0].text,
department: cells[1].text,
salary: parseDouble(cells[2].text));
employees.add(employee);
}
print(employees);
}
If you approve of this answer, please remember to accept it. My boss feeds me a slice of bacon every time I successfully answer a question ;)