Develop Reference

How to pass text from view to javascript

Hi there i have problem with Rails & Javascript. Here is my table in view.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr id="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr id="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
and my JS is
$('#select_name').click(function(event){
var username = $("#select_name").text();
console.log(username);
});
I have lot of names in my table, but JS printed first name in console. How can I print each name in the table to console?

You are creating in the each-loop N links (by the number of users) with the same select_name ID. Your javascript is confused, which one to choose. Try to add user id to your html select_name id and adjust your javascript accordingly. Same about your other id adminrow.
OR simply change your select_name to be a class and not id:
....
%a{:href=>"#", :class=>"select_name"}=u.firstname
....
$('.select_name').click(function(event){ ....
Ok, I am attaching the full code for you. For me it works just fine. E.g. prints just the name after clicking on the corresponding link:
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr class="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr class="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.select_name').click(function(event){
var username = $(this).text();
console.log(username);
});
</script>

Edit table in javascript

I want to delete/update a table on button event.
I have a table like this
<table class="SimpleCalendar">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
And I want to modify the inner HTML by clicking a button
$('.submit').click(function()
{
var mytable = $('.SimpleCalendar');
mytable.innerHTML = "test";
});
When I use firebug or the analysis button of my browser I can see that the innerHTML is changed but it display the same table over and over on my webpage.

$('.SimpleCalendar') returns a jQuery collection. innerHTML is a property of the HTMLElement objects. Defining a innerHTML property on a jQuery collection effectively doesn't do anything. You should either get the jQuery wrapped element from the collection using .get() method and then reset the innerHTML property or use the jQuery .html() method instead.

JQuery datatable link onclick event

I have a jquery datatable that contains multiple columns and rows as below.
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Action</td>
<td>Score</td>
<td>Corrected Score</td>
</tr>
</thead>
<tbody>
<tr>
<td>Student1</td>
<td>Math</td>
<td>Add 5
</td>
<td>73</td>
<td>
<input type="text" id="1_final_score" />
</td>
</tr>
<tr>
<td>Student2</td>
<td>Biology</td>
<td>Add 5
</td>
<td>84</td>
<td>
<input type="text" id="2_final_score" />
</td>
</tr>
<tr>
<td>Student3</td>
<td>History</td>
<td>Add 5
</td>
<td>50</td>
<td>
<input type="text" id="3_final_score" />
</td>
</tr>
</tbody>
When i click on the "Add 5" link, I want to add 5 to the score in the corresponding row and insert the result in the final score input field. I have tried using the jquery row-select feature, but am unable to figure out how to accomplish the above.

$(document).ready(function () {
$('table').find('a').click(function () {
var original = parseInt($(this).parents('tr').find('td:nth-child(4)').text()) + 5;
$(this).parents('tr').find('input[type=text]').val(original);
});
});

You can try this:
$(document).ready(function(){
$("a").on("click", function(){
var num=parseInt($(this).closest("td").next("td").text());
num=num+5;
$(this).closest("td").next("td").text(num);
$(this).closest("tr").find("input").val(num);
});
});
FIDDLE

Try with this
$('a:contains("Add 5")').click(function(){
$(this).parents('tr').find('td input:text').val(+$(this).parent().next('td').text() + 5 )
});
FIddle : http://jsfiddle.net/2n0bevxo/172/

Copy selected values from table and paste into div onclick - javascript

Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/

There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/

Change colors of table row if column contains certain value

I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".

I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/

First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();

If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.