<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
i am using this code in head portion for copying data from one text box to another. I need to know what can i do to copy data in number of fields in different rows to copy data from one column to another of the same row?
You can choose among popular javascript libraries and use their css based selectors to query your fields. A couple of examples:
JQuery's $: http://api.jquery.com/category/selectors/
dojo.query: http://dojotoolkit.org/reference-guide/dojo/query.html
As a result of the query you obtain an array like object (depending of the library) which gives you the ability to iterate over, and do your copying.
Related
I have a dataset in csv and it looks like below.
country,col1,col2,col3
Germany,19979188,11233906,43.7719591
UK,3839766,1884423,50.92349378
France,1363608,796271,41.60557873
Italy,957516,557967,41.72765781
I'd like to drop col1, col2 off while keeping country and col3. If possible, I'd like to wrap it into a function where I can pass column list that I'd like to drop/keep.
Using pandas, which I'm familiar with, I can easily do it. e.g. data.drop(['col1', 'col2'], axis = 1). But I found d3 way or js way in general is based on each row so couldn't come up with an idea to drop columns.
I was thinking of d3.map() taking desirable columns only. But I was stuck to build a general function that the column list can be passed in.
Could anyone have thoughts?
D3 fetch methods, like d3.csv, will retrieve the whole CSV and will create an array of objects based on that CSV. Because of that, filtering out some columns is useless. Actually, it's worse than useless: you'll spend time and resources with an unnecessary operation.
Therefore, the only useful solution is, if you have access and own that CSV, creating a new CSV without those columns. That way you'll have a smaller file, faster to load. Otherwise, if you cannot change the CSV itself, don't bother: just load the whole thing and use the columns you want (which will be properties in the objects), ignoring the others.
Finally, if you have a lot of data manipulation it might be interesting reducing the size of the objects in the data array. If that's your case, use a row function to return only the properties you want. For instance:
d3.csv(url, function (d){
return {country: d.country, col3: d.col3}
}).then(etc...)
I have a datatable with a number of rows:
var table = $('#mytable').DataTable(...)
And I'm trying to find the rows that contain <a>'s with specific data values.
From the documentation, I'd expect is that table.rows('<magic row-selector>') to work, for some value of <magic row-selector>. But even the simplest selectors don't seem to work the way I'd expect them to.
The docs say that if I pass a string to rows(), it is treated as a JQuery selector operating on the the <tr> elements.
http://datatables.net/reference/type/row-selector
Now I know for certain that each of these rows contains a number of 's - I can see them in the debugger if I examine the outerHTML of the elements returned by table.rows.nodes(). So I'd expect that this would return all rows:
table.rows('a')
But it returns none.
What am I not understanding?
What selector should I use, to find all of the rows that contain <a>'s with a specified value for a data attribute?
edited in response to answer
davidkonrad's answer provides some help - I need to pass a jQuery selector object, rather than a string.
Unfortunately, it seems that I need to construct the jQuery selector object before I define the table. I'm not sure I understand why, it seems an unreasonable restriction, but playing around with his fiddle, I did see differences in the rows returned by table.rows(selector) between when I defined the selector before or after I initialized the table.
In my case, then, that makes this approach unusable, because what I'm trying to do is to remove rows that have certain values set in data attributes. There is no way for me to know what values the user might have selected before I construct the table.
I also think the documentation is a little bit cryptic on that point :) The meaning is
By "jQuery selector" there is meant "the jQuery object returned by a $(selector)"
Only jQuery objects containing <tr>'s is allowed
On paginated tables, you must create the "jQuery selector" before instantiating the dataTable
So, if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains the text "test"
var selector = $('tr:contains("test")');
var table = $('#example').DataTable();
var rows = table.rows(selector).data();
//now you can iterate
for (var i=0;i<rows.length;i++) {
//each rows[i] is an array of the rows columns
console.dir(rows[i]);
}
if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains an <a> containing a certain text, like "test"
var selector = $('tr a:contains("test")').parent().parent();
...
var rows = table.rows(selector).data();
...
the above selectors in an example -> http://jsfiddle.net/q2p2n23m/
I'm trying to work out how best to handle an input form that is for order processing that basically has a number of identical lines on it for ordering items of clothing.
The controls are all drop down selectors (4 different ones to a line).
At the moment I've just give each one a unique ID and am working through them one by one, but that strikes me as very inefficient.
Is there some way I can use a loop in the html (I don't think this can be done) or some other way to use an array of controls and just iterate over them on the form submit?
Meteor projects usually include jQuery. jQuery is pretty useful for grabbing groups of elements and running them through a function so that you don't have to repeat yourself as much.
In addition to unique ids, you can add the same class to all or a group of the form elements, and then in the onSubmit callback grab them all with a class selector in jQuery and send them all to a function that combines them into a useful object, e.g.
// collect the form inputs in class salesform into an object
var formResult = {};
$(".salesform").each(function(el){ formResult[$(this)[0].id]=$(this).val() });
// form ids and values are now in formResult
There may also be other selectors you can use instead of tagging the elements you want with a class.
There is two main aims:
Sort table of data using javascript without libraries such as jquery, so pure javascript.
Sort/group rows together based on class/id (like css).
I thought maybe getElementById could be useful, but don't know enough javascript to investigate properly.
A table's rows can be found in the rows[] array of said table.
You can create an array containing those rows.
You can then .sort() the array based on a callback function that looks up certain info, in the form
.sort(function(a,b) { /* return -1 if a comes before b or 1 if b comes before a */ })
If you iterate over the array and appendChild the rows to the table they are in, the result is a sorted table.
If you have problems with the actual code, please post what you have so far and we can help more specifically ;)
I have an ajax function which call a servlet to get list of products from various webservices, the number of products can go up to 100,000. I need to show this list in a html table.
I am trying to provide users an interface to filter this list based on several criteria. Currently I am using a simple jQuery plugin to achieve this, but I found it to hog memory and time.
The Javascript that I use basically uses regex to search and filter rows matching the filtering criteria.
I was thinking of an alternate solution wherein I filter the JSON array returned by my servlet and bind the html table to it. Is there a way to achieve this, if there is, then is it more efficient than the regex approach.
Going through up to 100,000 items and checking if they meet your criteria is going to take a while, especially if the criteria might be complex (must be CONDO with 2 OR 3 bedrooms NOT in zip code 12345 and FIREPLACE but not JACUZZI).
Perhaps your servlet could cache the data for the 100,000 items and it could do the filtering, based on criteria posted by the user's browser. It could return, say, "items 1-50 of 12,456 selected from 100,000" and let the user page forward to the next 50 or so, and even select how many items to get back (25, 50, all).
If they select "all" before narrowing down the number very far, then a halfway observant user will expect it to take a while to load.
In other words, don't even TRY to manage the 100,000 items in the browser, let the server do it.
User enters filter and hits
search.
Ajax call to database, database has indexes on appropriate
columns and the database does the filtering.
Database returns result
Show result in table. (Probably want it to be paged to
only show 100-1000 rows at a time
because 100,000 rows in a table can
really slow down your browser.
Edit: Since you don't have a database, the best you're going to be able to do is run the regex over the JSON dataset and add results that match to the table. You'll want to save the JSON dataset in a variable in case they change the search. (I'm assuming that right now you're adding everything to the table and then using the jquery table plugin to filter it)
I'm assuming that by filtering you mean only displaying a subset of the data; and not sorting.
As you are populating the data into the table add classes to each row for everything in that row you want to filter by. e.g.:
<tr class="filter1 filter2 filter3">....
<tr class="filter1 filter3">....
<tr class="filter2">....
<tr class="filter3">....
Then when you want to apply a filter you can do something like:
$('TR:not(.filter1)').hide();
I agree with Berry that 100000 rows in the browser is bit of a stretch, but if there's anything that comes close to handling something of that magnitude then it's jOrder. http://github.com/danstocker/jorder
Create a jOrder table based on your JSON, and add the most necessary indexes. I mean the ones that you must at all cost filter by.
E.g. you have a "Name" field with people's names.
var table = jOrder(json)
.index('name', ['Name'], { sorted: true, ordered: true });
Then, for instance, this is how you select the records where the Name field starts with "John":
var filtered = table.where([{ Name: 'John' }], { mode: jOrder.startof, renumber: true });
Later, if you need paging in your table, just feed the table builder a filtered.slice(...).
If you're getting back xml, you could just use jQuery selection
$('.class', context) where context is your xml response.
From this selection, you could just write the xml to the page and use CSS to style it. That's where I'd start at first, at least. I'm doing something similar in one of my applications, but my dataset is smaller.
I don't know what you mean by "bind"? You can parse JSON and then use for loop (or $.each()) to populate ether straight HTML or by using grid plugin's insert/add