I am using following script to highlight row when I clicked edit button of that row. I am passing Id of row when I click on button! My problem is the code is working in Mozila Firefox but not on Google Chrome. What is wrong in following code.
function high(id)
{
$('tr').removeAttr('style');
document.getElementById(id).style="background-color:#eeeeea;color:#000000;font-weight:500;";
}
Try this,
$('#'+id).attr("style","background-color:#eeeeea;color:#000000;font-weight:500;");
Working on chrome also.
The reason, can be style is an object which has some properties in it
and chrome may not allow to overwrite it. So the custom string you
passed in style will not apply to it, hence no changes applied to the
element.
You need to set properties of style object individually.
var elem = document.getElementById(id);
//Set properties
elem.style.color = "#000000";
elem.style.fontWeight = "500";
elem.style.backgroundColor = "#eeeeea";
Since you are using jquery, You can use .css()
$('#' + id).css({
"background-color" :"#eeeeea",
"color":"#000000",
"font-weight":"500";
});
However, I would recommend you to create a CSS class then use it.
$('tr').removeClass('highlight');
$('#' + id).addClass('highlight');
Here is a demo to add special class to the editing row and remove the class on the other rows. This is done using the closest() method of jquery. You even do not need to use any id for this.
$("button").on("click",function(){
$("tr").each(function(){
$(this).removeClass("marked");
});
$(this).closest("tr").addClass("marked");
});
.marked{
background-color:#eeeeea;color:#000000;font-weight:500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
</table>
Related
I'm trying to implement a dynamically growing/shrinking table as in the picture. I know I need to use the insertRow() function, but I'm confused about how to dynamically give ID's to the rows. I need to be able to disable the end date input field if the checkbox is checked (that's why the need to give ID's). I need to be able to insert rows and delete rows. I'm fairly experienced in programming concepts but new to JavaScript and web development in general. If anyone could point me to sample code or explain if there is another efficient way of doing it, I'd greatly appreciate it.
http://imgur.com/68t3dH2
An example whitout id, working for each line control,
like you screenshot (id's are just a way among others...)
You can't have multiple identical id's, then
Assuming your action button's are called by their respective classname,
".add" and ".del"
For Removing
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
});
For a New line
$(".add").on("click", function()
{
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq("+lineOffset+")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
Table test
<table>
<tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>
(function() {
$(".del").on("click", function() {
// removing the line of element clicked
$(this).parents("tr").remove();
});
$(".add").on("click", function() {
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq(" + lineOffset + ")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr id="a_0">
<td>test0</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_1">
<td>test1</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_2">
<td>test2</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
</table>
However, you can see in my example, the ID's beginning by a_*
are not used (yes, it's not necessary and relative as your case)
And another way to make that is to use the jquery method .index()
to get the line offset clicked and.. remove or copy it!
Note :
If you realy need to use a line ID,
well, you can proceed by using css selectors like that:
$("tr[id^='a_']")
IF EMPTIED TABLE
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
$("#hidden_control").show(); // or .css("display", "block");
});
$("#hidden_control").on("click", function()
{
$("table").append("<tr><td>...</tr>"); // add a new first line
$(this).hide(); // and hide it directly until next reinit
});
// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">
// or, hidden row solution (where colspan=6 depend the number of cell you have:
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>
// CSS class for hidden_control
#hidden_control
{ display: none; }
Documentation :
Go on https://api.jquery.com/, and search for "parents", "after", "remove", "append", "html", "index"
Wrap each row with a class or row.
if you want to add:
var form="<div> <input type='text'></div>";
$(document).on('click', ".add", function(){
$(form).insertAfter($(this).closest("#fields"));
});
delete:
$(document).on('click', ".remove", function(){
$(this).closest('div').remove();
});
jsFiddle demo
You don't need ID's for that. The JavaScript handler for the checkbox can locate the End Date field by navigating the DOM tree. Starting at the checkbox, walk up the DOM tree (e.g. parent()) to find the cell (<TD>), then walking the siblings (next() twice), and down to the input field (e.g. find('input')).
As for adding a new row, you can follow the advice of this answer:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
And you remove a row by calling remove() on the <TR>.
I trying to a class to my html page with jquery, here is my code.
<tbody>
<tr>
<td class="itmId">1</td>
<td class="entryNAmee">David</td>
</tr>
<tr>
<td class="itmId">2</td>
<td class="entryNamee">Alan</td>
</tr>
</tbody>
I am changing the td to input text with jquery on clicking in the every td except 1st column. that is working fine and when the above event perform the tr become like below.
<tr>
<td class="itmId">1</td>
<td class="entryNAmee nowText">
<input type="text" value="Alan">
</td>
</tr>
After making corrections an event working in blur. code is below.
js.
$(document).on('blur','table tr td input',function()
{
var fieldNewValue = $(this).val();
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
//console.log(fieldNewId);
alert(fieldNewId);
/*$.ajax({
typr:"post",
url:"updateEntry",
dataType:'json',
data:{newValue:fieldNewValue},
success:function(data)
{
console.log("updated succesfully");
}
});
*/
$(this).parents('td').text(fieldNewValue).removeClass('nowText');
$(this).remove();
});
I Want to add a class to the upper td of the the clicked td.
I tried the closest and parents jquery api's, But didnt work,
Anyone can please support me to how to catch the td ?
Also what are the different between closest and parents in jquery.
Thanks
Change:
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
to:
var fieldNewId = $(this).closest('tr').find('td.itmId').addClass("kkkkkkkkk");
You can read the docs to see the differences between .closest() and .parents(), however in your code you weren't traversing far enough up the DOM. $(this).closest('td.itmId') was looking for a td that didn't exist where you expected it to since it's a sibling of the parent cell that you were in.
You could also use (this).closest('td').prev() instead of (this).closest('tr').find('td.itmId')
There is also .prev in jQuery which returns the "upper" or better previous element in current context. It works just like this:
$(this).prev().addClass('kkkkkkkkk')
I have this row with two <td>'s with classes messageROW and titleROW following a checkbox with the ID of 'activecd'. I'm trying to change the bg color of both messageROW and titleROW (the whole row) when the checkbox is toggled but instead titleROW only changes colors.
Any suggestions?
$('[id^=activecd]').change(function(){
$('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});
HTML:
<tr>
<td class="messageROW"></td>
<td class="titleROW"></td>
<td><input id="activecd"></td>
</tr>
I'd suggest the following, albeit untested:
$('[id^=activecd]').change(function(){
$(this).closest('tr').toggleClass('colorcode', this.checked);
});
This listens for the change event on the specified element(s), finds the closest tr element and adds the colorcode class if the checkbox is checked, and removes the class if not.
Try jQuery $().add(selector), $().toggleClass("bgOn") with css
<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>
Not clear question, I think.
<button onclick="someFunction(this)">Toggle color</button>
function someFunction(this){
var $this=$(this);
$this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
// or
$this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}
might help you.
I have the following (repeating) html:
<tr>
<td>Some text</td>
<td><a href="#">Click me<a/></td>
<td><form><input type="hidden" value="4"/></form></td>
</tr>
Using jQuery on the click event of the link I want to retrieve the value of the input element. I have tried all kinds of parents(), children(), nextAll(), prev() combinations but I can not get the value of the input element.
Here is a link to my testing functions. jsFiddle Link
Additionally how would i retrieve the text of the first td element?
Thanks a lot for helping me achieve this.
Michael
You can use parent to get to the td from the a, then next to get to the following td, and then find to get to the input element:
$("a").click(function() {
var value = $(this).parent().next().find("input").val();
});
Here's an updated fiddle.
To get the text from the first td you can take pretty much the same approach, but use prev instead of next.
Also, seeing as you have several repetitions of the HTML snippet, it's probably going to be more efficient to bind the click event handler higher up the DOM tree (maybe you already are, you haven't posted any JS so I don't know):
$("table").on("click", "a", function() {
//Do stuff
});
My usual approach to these things is to use closest to go back to some common container and then find to come back down:
$('a').click(function() {
var $input = $(this).closest('tr').find('input');
// Do something with $input.val()
});
Demo: http://jsfiddle.net/ambiguous/Zh6Zk/
The closest/find approach withstands DOM structure changes fairly well so you don't have to worry that much about moving things around in your HTML.
it will give you the input value
$(document).ready(function(e) {
$('.myAnchor').click(function(e){
var parentNode = $(this).parent();
var valueOfInput = $(parentNode).next().children('input').val();
alert(valueOfInput);
});
});
html:
<form>
<table>
<tr>
<td>Some text</td>
<td>Click me</td>
<td><input type=hidden value="4"/></td>
</tr>
</table>
</form>
I am trying to grab documentnumber attribute from the tr tags inside tbody, and save it in an array.
Below is the html , I am working on
<tbody class="line-item-grid-body">
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
</tr>
</tbody>
and this is what I did, which is not working. If I don't specify particular class then system also grabs inner tr tags, which I don't want
var docs = jQuery("#line-item-grid").find('tbody').find("tr[class='line-item parent-line-item line-item-show reorderable-row droppable-element']");
for (i=1;i<=docs.length;i++)
{
var tempValue = jQuery(docs[i]).attr('documentnumber');
alert(tempValue);
}
Any ideas?
There's several ways you could go about this. I would do the following....
var docs = $('.line-item-grid-body>tr');
Docpage: Child selector
Another option:
var docs = $('.line-item-grid-body').children('tr');
Bookmark and frequent this page ... Selectors - jQuery API
try this as your selector
$('tbody > tr','#line-item-grid');
Hmm i didn't test this (so check for typos), but off top of my head, i'd try something like this:
jQuery(".line-item-grid tbody > tr").each(function() {
alert($(this).attr('documentnumber');
});
You can define selectors one after another, pretty much same as in CSS.
Also check child selector (http://api.jquery.com/child-selector/) for selecting direct child elements.
Hope it helps