I need to dynamically build an HTML table given a certain query method. It doesn't seem too complex and I figure there must be a quick way of doing this.
The query method: Given x amount of data sources, I can query each one, one after the other, for a given time period and get timestamps:values for matching records in that time period. The queries happen one after the other so I have to build an HTML table out of them one by one.
My idea: build it out one by one to look something like this:
<table>
<th>
timestamp
</th>
<th>
source 1
</th>
<th>
source 2
</th>
<th>
source 3
</th>
<tr>
<td>
timestamp 1
</td>
<td>
source 1 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
source 1 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
source 1 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td>
source 2 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td>
source 2 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td>
source 2 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td></td>
<td>
source 3 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td></td>
<td>
source 3 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td></td>
<td>
source 3 value 3
</td>
</tr>
</table>
Check this fiddle for a good visual: http://jsfiddle.net/ac0o2715/2/
Then sort that table by timestamp using something like this: http://jsfiddle.net/qNwDe/417/ (from this StackExchange thread: Sort a table fast by its first column with Javascript or jQuery )
Then combine by identical timestamp columns using some efficient method that I cannot think of unfortunately, however I feel should not be very difficult since there should be no conflicting columns when combining.
OR, maybe this entire strategy is inefficient, I just couldn't think of a quick way of inserting new rows into the current table sorted by timestamp (and also combining them on identical timestamp) while iterating through the queried data. It seems like it would be faster to dump them all in first and then do one sorting function and merge.
This project is using jQuery, so Javascript and/or jQuery solutions are just fine.
Related
I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.
Hey guys I have a question and I'm looking for help to change this code a lil bit cause I'm struggling to do this for the last hour and I can't seem to figure it out how to change it.
This script works exactly how I want it to be. I can add an input field, I can delete input field and what's the most important it sum up all values.
https://jsfiddle.net/btxjkgr4/3/
What I need is to change this script that It can instead of creating div's, create next table rows with 3 columns to fit this table and sum up all values from 3rd column in each row
<table class="table" id="tab_klasa1">
<tr>
<th class="tg-031ec" colspan="3">Class</th>
</tr>
<tr>
<td class="tg-031ec">Name</td>
<td class="tg-031ec">Profile</td>
<td class="tg-031ec">No. Users</td>
</tr>
<tr>
<td class="tg-031e">A</td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
</tr>
<tr>
<td class="tg-yw4lcr" colspan="2">Total:</td>
<td class="tg-yw4l"><input class="input_t4" type="text" name="fname"></td>
</tr>
</table>
I applied table in this jsfiddle. I'd really appreciate for help.
Mornin' StackOverflow.
I am having some neurological problems trying to find sibling columns of a checkbox.
Table structure is (roughly) as follows:
<tr>
<td><input CHECKED type="checkbox" /></td>
<td data-context="key 1">Sibling 1</td>
<td data-context="key 2">Sibling 2</td>
<td data-context="key 3">Sibling 3</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td data-context="key 4">Sibling 1</td>
<td data-context="key 5">Sibling 2</td>
<td data-context="key 6">Sibling 3</td>
</tr>
Now, what I have to do, is get all the sibling elements of the checked checkbox (all the elements within the which checkbox has been checked). I've tried using Jquery's .siblings() and .each() on that, however it turns up with nothing.
I'm obviously missing something important.
I'm not sure what you want to do with the data but you can use jquery is.(":checked") and then find the .parent().siblings() of the input to get the info (input is a child so you need to back out to the parent level then you can look at the siblings)
JSFIDDLE
As the others have stated, I wasn't thinking straight.
I needed to get the parent of the , and then it's siblings. Thanks for the swift answers, upvotes and accepts for all.
First off, forgive the hard coded table data. I am doing a simple add row type of thing. I'm wondering how to get at the data in the sibling TDs. Should I be using a form? Or something else? basically I just need access to the data that is already in there and move it to another table.
<tbody data-bind="foreach: Resources">
<tr>
<td data-bind="text: name">
</td>
<td data-bind="text: type">
</td>
<td data-bind="text: contact">
</td>
<td data-bind="text: status">
</td>
<td>
<input type="button" data-bind="click: addResourceToList" value="Add Resource" />
</td>
</tr>
</tbody>
Here is the start of the code in the model.
addResourceToList = function () {
self.ResourcesInPlan.push(new ResourceListModel({ name: this.title }));
};
Thanks for any advice.
Update: The data was there, but I missed it. I changed to this line.
self.ResourcesInPlan.push(new ResourceListModel(this.name));
Because I was referencing the model wrong as you can see.
See this example:
http://knockoutjs.com/documentation/click-binding.html#note_1_passing_a_current_item_as_a_parameter_to_your_handler_function
KO will send the item as the first parameter to the function too.
I found a website last night that is simply awesome. Here's the URL:
http://yourworldoftext.com/
WARNING: Site may be NSFW.
And it got me thinking straight away how this site is constructed. Taking a look at the page source doesn't reveal much, but if I look at it in Firebug I see a lot of tables like this:
<div class="tilecont" style="top: 994px; left: 1320px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>A</td>
<td>L</td>
<td>L</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>Y</td>
<td>O</td>
<td>U</td>
<td>R</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>B</td>
<td>A</td>
<td>S</td>
<td>E</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
</table>
</div>
the tilecont DIV is repeated and tiled along the entire page, and the table inside occupies the entire width and height of that DIV. Then, each <tr> inside the table is one row with 16 <td>'s inside that row to make up each character.
It's hard to explain, if you have Firebug installed you can simply drag it to the page and see for yourself.
I thought this was pretty damn clever, but I can't work my head around how it would be stored in a database or something? I have tried looking through the JS files but to be honest there's a lot of stuff in there I either don't know or not related to how it's stored etc. I assume it's making an AJAX request to a database on every keyUp event storing the new data for that particular "cell"?
Anyone have any input on how they think this is done?
You're probably roughly correct. The site knows where your viewport is and only loads the part that is visible, in 16 char "chunks". The DB just saves 16 char strings with an x and y coord. You can see it updating in 1x16 blocks if you drag quickly.
As for sending, if it were me I would cache the text and only send one 16 char "chunk" at a time. Each time an edit occurs check if its in the same chunk as the last one. If not send the last chunk and start caching the new one.
To keep the view up to date you could have it check for changes in your view area by sending an ajax request every couple seconds with window.setInterval(). It could send back some JSON or something with just the chunks that have changes, maybe encoded with their location in the grid in the first few chars.
I'm just hand waving here, I haven't looked at the code, but you're right. Its a fascinating site.
EDIT: More detail...
Check out the init() function (line 906 in yourworld.js). That's the best point of entry if you want to study the code. You can see how editing works at line 953. On keydown the script focuses a hidden input element which catches the text. Then he uses a callback on setInterval to get the first character from the input field every 10ms and then blank the field. If there's a char then it gets cached in an array and put in the active cell on the grid. He says in a comment this is to prevent pasting.
The array of edits is sent every two seconds (line 1017). Each character of input is sent with a position and timestamp.
fetchUpdates() handles getting newly updated cells from the server (line line 383). It contains a jQuery.ajax request with a callback on success to a function that makes the necessary changes and calls fetchUpdates() again after a 1 second setTimeout().