I have a bunch of tables as partialViews which are loaded in using ajax.
now I want to write a global function that when someone clicks on a tablerow, the background-color turns orange, and when selecting a different tablerow the old one turns white again and the new one turns orange.
so I wrote this at the bottom of the _Layout.cshtml:
<script type="text/javascript">
$(document).ready(function() {
$("table tbody tr").on('click', function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tbody tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});
</script>
but it's not being reached at all, console.logs or alerts that I've placed in that function are not being fired. Why not?
btw my tables all have a standard setup
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
you are creating tables dynamically so bind click event using document with .on, see below
$(document).ready(function() {
$(document).on('click',"table tr", function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});
$(document).ready(function() {
$("body").on('click', "table tr", function () {
$("table tr").removeClass("selectedTableRow");
$(this).addClass("selectedTableRow");
});
});
Related
I am using a jQuery plugin to drag table columns to rearrange them as below
$("#myTable").dragtable();
It works fine for existing table and I can drag table columns. However I need to add rows dynamically in myTable but I can't drag dynamically added column.
I looked documentation for .live method but not sure how I would use it in my scenario.
any suggestion ?
You can do like this:
$('.defaultTable').dragtable('destroy').dragtable({});
Full example:
$('.defaultTable').dragtable();
$('#add-column').click(function(e){
var tbody = $('.defaultTable').find('tbody'),
thead = $('.defaultTable').find('thead');
tbody.find('tr').each(function(){
var tr = $(this);
tr.append('<td>Some column</td>');
});
thead.find('tr').each(function(){
var tr = $(this);
tr.append('<th>appended column header</th>');
});
$('.defaultTable').dragtable('destroy').dragtable({});
});
<link href="https://rawgit.com/akottr/dragtable/master/dragtable.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<span id="add-column">Add column</span>
<table class="defaultTable sar-table">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
</tr>
</tbody>
</table>
You can't use .live in this situation. You will have to just call .dragtable() for each new element that you add.
For my recent project, I need to show data in a table. When I click on any row of the table, all the contents of the row will be shown in an additional div. See the code below:
<div class="left-side">
<table id="data">
<tr>
<td>cell(1,1)</td>
<td>cell(1,2)</td>
<td>cell(1,3)</td>
</tr>
<tr>
<td>cell(2,1)</td>
<td>cell(2,2)</td>
<td>cell(2,3)</td>
</tr>
<tr>
<td>cell(3,1)</td>
<td>cell(3,2)</td>
<td>cell(3,3)</td>
</tr>
</table>
</div>
<div class="right-side">
<!-- when a row is clicked, then the respective information is shown here-->
<!-- for example, if i click the first row, then it shows cell(1,1) and cell(1,2) and cell(1,3) and so on-->
</div>
Please suggest any idea of how to do it using jQuery or JavaScript.
var string = '';
$("#data tr").click(function() {
$(this).find("td").each(function(index) {
string += $(this).text();
});
document.write("<br/>" + string);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-side">
<table id="data">
<tr>
<td>cell(1,1)</td>
<td>cell(1,2)</td>
<td>cell(1,3)</td>
</tr>
<tr>
<td>cell(2,1)</td>
<td>cell(2,2)</td>
<td>cell(2,3)</td>
</tr>
<tr>
<td>cell(3,1)</td>
<td>cell(3,2)</td>
<td>cell(3,3)</td>
</tr>
</table>
</div>
<div class="right-side"></div>
Add a click event handler to your jQuery code:
<script type="text/javascript">
$(function() {
$("#data tr").click(function() { //Click event handler for the table column
var columnText = $(this).text(); //text from the column clicked.
$(".right-side").text(columnText); //Populates the .right-side div with the text.
});
});
</script>
Tip: If you know jQuery, then prefer jQuery over plain JavaScript. It'll lead to a much cleaner and concise code.
Just add a click function to your eg:
function showInrightDif(this)
{
var divtext=''
$(this).find('td').each(function() {
divtext = divtext + $(this).text;
});
$('.right-side').text(divtext);
}
add this code :
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('#data tr').click(function () {
$('.right-side').text($(this).text());
});
</script>
I have a jquery dataTable with 3 columns (check box column, userId, full name). The 'check_all' check box worked fine (meaning all the rows were checked when the 'check_all' was clicked) when I used it with jquery.dataTables.js and jquery.dataTables.min.js version 1.9.4. However, I have to use dataTable version 1.10.5 in order to use the "draw()" function. But once I started using the new version, the check_all checkbox stopped working, the alert() inside the .click() didn't get invoked. I tried to put the .click function inside the $(document).ready(), but didn't fix the issue. Anybody has any idea ? Thanks!!
Script:
$('#check_all').click(function()
{
alert("here");
var oTable = $('#users').DataTable();
});
HTML part:
<DIV id ="tablePanel">
<table class="userTable" cellpadding="4" rules="all" border="1" id="users">
<THEAD>
<TR>
<th><input type="checkbox" id ="check_all" class="call-checkbox" name="check_all">Select users</th>
<th>User Id</th>
<th>Full Name</th>
</TR>
</THEAD>
<TBODY>
<TBODY>
</table>
</DIV>
You are missing the closing ")" on the click event handler function. You should also ensure that any bindings occur after the DOM is ready by placing them inside jQuery's document.ready() function.
The full syntax is $(document).ready(function () { .. }); but it can be shortened to $(function() { ... });
$(function () {
$('#check_all').click(function () {
alert("here");
var oTable = $('#users').DataTable();
});
});
Demo: http://jsfiddle.net/BenjaminRay/qe0ckve8/
I am using jQuery.
I want to select a cell from a table.
So I tried the following codes.
// First line works fine for me. I can get a list of columns at the correct target row.
var targetColumns = $(elemClicked).closest("tr").find("td");
// I want to get the cell with the class named "draftstatus". This line has problem. I cannot get what I want.
var targetCell = columnsAtTargetRow.$(".draftstatus");
The targetColumns inspected from browser looks like the following:
The 5th td above is my target cell.
I also try to use find() function. It won't work either because find() will start from next children level.
columnsAtTargetRow.find(".draftstatus"); // this does not work.
What functions should I used to get that cell within that "list of td".
Thanks in advance.
You just need to figure out which selectors to use.
var targetColumns = $(elemClicked).closest("tr").find("td");
this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");
If the elemClicked is a td, then you can just use siblings(".draftstatus");
Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.
$(function(){
//reference all cells with myclass class using filter
$("#table1 tbody td").filter(".myclass").addClass("red");
// click events for all tds reference the .target class cell using siblings
$("#table1 tbody td").on("click",function(e){
$(this).siblings(".target").toggleClass("red");
});
//items inside a table cell click event
$("#table1 tbody td a").on("click",function(e){
//toggle bold class
$(this).closest("td").siblings(".target").toggleClass("bold");
//prevent event from bubbling up
e.stopPropagation();
});
})
.red {
background-color:red;
}
.bold { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
</tbody>
</table>
This is incorrect:
columnsAtTargetRow.$(".myclass");
This should be:
columnsAtTargetRow.find(".myclass");
<table id="tab" border=2>
<tr> <td>1</td><td>a</td><td>red</td> </tr>
<tr> <td>2</td><td>a</td><td>green</td> </tr>
<tr> <td>3</td><td>a</td><td>orange</td> </tr>
<tr> <td>4</td><td>a</td><td>green</td> </tr>
<tr> <td>5</td><td>a</td><td>yellow</td> </tr>
<tr> <td>6</td><td>a</td><td>blue</td> </tr>
</table>
i can't modify html. i can use only jquery and css. i would like make:
if td == red then all TR with this TD is red, if td == green then all TR is green.
how can i make this?
live example: http://jsfiddle.net/sjuKa/1/
$('#tab tr').each(function() {
$(this).css({'background': $(this).children('td:last').text() });
});
example: http://jsfiddle.net/simoncereska/sjuKa/3/
You can use .text() to get the text value of a cell, and .parent() to get the element's parent. Combining these, you can loop the td tags, check if they contain 'red', and if so, get their .parent() and set its background-color to red.
See http://jsfiddle.net/sjuKa/2/ for a working example :)
JS:
var tds = $('td');
tds.each(function() {
$(this).parent().addClass( $(this).html().trim() );
})
CSS
.red
{
background-color: red;
}
JSFiddle
Same for all the rest - meaning CSS classes named: orange, green etc.
$(document).ready(function(){
$('table tr').each(function(){
if($(this).children(':last').text() == 'red') {
$(this).children('td').css('background-color', 'red');
}
})
})
fiddle here http://jsfiddle.net/sjuKa/1/