I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)
You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.
Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}
Related
How do I append records to a table in local storage?
I have two input fields (a & b), and a button, and a table where I want the contents of the input fields to be recorded and appended..
When I click the button, the first time it appends correctly, but the second time, the values in the the table are replaced
Please help me solve this in a way that maintains the records in table.
Thanks and regards
Prakash
Be sure that in your append call, you are including <tr> along with the rest of the update.
Example:
$("#myTable").append("<tr><td>Content A</td><td>Content B</td>")
Recently I found this very interesting feature with HighCharts, drawing values from the table.
You can see the example on the following jsfiddle...
http://jsfiddle.net/4mb9k/
That can be found on this thread.
So my question is how can I make the data that is in the table, to be dynamic... Meaning, with <input> tag so when the user enters the values, and click the button ... the chart to appear with the inputed values.
(Doesn't matter the chart type.. column, line, spline... regardless)
You can see my picture in order to understand what I mean...
http://imageshack.com/a/img691/3569/bfz.png
Thanks!
You can add the attribute contenteditable to the tds, and add a button which will load the graph like this
HTML
<tr>
<th>Plums</th>
<td contentEditable>5</td>
<td contentEditable>11</td>
</tr>
jQuery
$('button').click(function(){
$('#container').highcharts({//rest of the code
DEMO
I'm using Django and Zurb-foundation.
On a certain page I have on the one hand a bunch of items organized in a table, displaying their properties. On the other hand, on the same page I have a form which contains a select box, the elements in which are the previously mentioned items. Now in principle as the number of items grows larger it will get boring finding one in the form's select box. I would like to, if you click on one of those items being displayed on the table, have that same item be selected in the select box.
How do I do this? I know absolutely nothing about javascript, but if you can at least mention the relevant key concepts, I'll learn them.
Thanks!
Please check out this JSFiddle: http://jsfiddle.net/zvCvL/5/
Although I have left several comments detailing how this should be done, I will summarize below:
Loop through each of the items and their descriptions using Django's templating engine's looping feature (this part is going to be left up to you to figure out, but I have left you a link in the fiddle to get you started) For example, you will be adding these to your tbody in each of your loops:
<!-- loop iteration one -->
<tr>
<td class="item1">Item 1</td>
<td class="item1">The first item</td>
</tr>
Do not forget, however, that my method requires that a unique name be given to the td's in every iteration.
Then, you can work on the dropdown. This will require a simplier loop, just adding these to the ul which acts as your dropdown:
<!-- loop iteration one -->
<li class="item1"><a>Item 1</a></li>
Once again, this requires a unique class name, yet one that corresponds to the class name given to the item in table.
Finally, you have your JavaScript to take care of. Simply, you can check to see if the user is hovering over an li, check which class it belongs to, and apply some sort of color to all elements which have that same class. Of course, one caveat is that this will act upon all list elements. I'll leave it up to you to change that as needed.
Hopefully this helps! (The ultimate result is: http://jsfiddle.net/zvCvL/5/embedded/result/)
I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?
This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.
Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});
jsFiddle Example
Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.
Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
Updated jsFiddle Example
I have a page with some tables on it. In each table the first row is normal but the rest of the rows have a class of hidden so that they are not displayed on load. In one of the cells on the first row of the table there is a link to click to view more details (fade in the hidden rows of that table). I'm struggling to get this to work though. So basically I need a selector that will find all the hidden rows that are in the same table as the element that's clicked so that they can be faded in. I have used:
$(.hidden).fadeIn()
but because there is more than one table on the page it fades in all the hidden rows in all of the tables, I just want the ones in the specific table. I also used:
$(this).closest('tr').next(".hidden").fadeIn("slow")
which was half there, but it only fades in the first hidden row in that table but if there's more than one then the rest are still hidden. Any help would be much appreciated. Thanks
Try -
$(this).closest('tr').nextAll(".hidden").fadeIn("slow");
Detailed documentation of nextAll -
http://api.jquery.com/nextAll/
is that so, right?
<table>
<tr>
<td><span class="show">View more details</span></td>
</tr>
<tr class="hidden">...</tr>
....
</table>
then
<script type="text/javascript">
$(document).ready(function() {
$(".show").click(function() {
$(this).closest('table').find('tr.hidden').fadeIn("slow");
});
});
</script>