<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.
You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()
$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});
usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()
Related
I have code like this:
<table>
<tr>
<td>Cel1
<td>Cel2
<tr>
<tr>
<td>Cel3
<td>Cel4
<tr>
</table>
How can I disable event jQuery? I tried this method:
cell.setAttribute("disabled","true")
$('td').unbind();
Will unbind all events on td elements.
Given your example HTML:
<table>
<tr>
<td>Cel1</td>
<td>Cel2</td>
</tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
</tr>
</table>
If you want to disable a given cell using jQuery, you'll need to do two things.
First, you'll need to select a cell. You can do this without changing the markup by using the :nth-child(), for instance - but to make it simple, let's add a class to the cell you want to disable:
<table>
<tr>
<td class="my-cell">Cel1</td>
<td>Cel2</td>
<tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
<tr>
</table>
Now, we can select the cell using jQuery as follows:
var cell = $('.my-cell');
To unbind event handlers from the element
From here, if you want to remove all events which are assigned to the element, you can use jQuery's .unbind() as Sofiene mentioned:
cell.unbind();
To hide the cell in the table
If you'd like to remove the cell from the table by setting CSS attributes, this can be done by setting the style attribute using jQuery's .attr(), for instance:
cell.attr('style', 'visibility: hidden;');
I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.
For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/
You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>
https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.
If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)
I have a table and the TDs have a class and based on that class I'm adding click events to it like this
$('#regRegionsTable').on('click', '.toggleDetail', toggleDetail);
I'm using on because the table appears, goes away, and returns, and so on, so I need to be able to add events to the table as it gets added to the DOM. In certain circumstances I need to disable the events for a specific row. I'm trying it like this, but it's not working.
$(row).off('click', '.toggleDetail');
row is the TR DOM node. So I'm trying to get all of the TDs in the row that have the toggleDetail class and turn off the click event binding.
This is an example that could be useful. I add the click event on each td. On certain circumstances (clicking on a button in my example) I disable the click event for all the td on a specific row (the first row) using unbind()
$('#regRegionsTable td.toggleDetail').on('click', toggleDetails);
function toggleDetails(){
console.log("click avvenuto")
}
$("button").on("click",function(){
$('#regRegionsTable tr:first-of-type td.toggleDetail').unbind('click', toggleDetails);
})
function toggleDetails(){
console.log("click avvenuto")
}
<table id="regRegionsTable" border="1">
<tr>
<td class="toggleDetail">1</td>
<td class="toggleDetail">2</td>
<td class="toggleDetail">3</td>
</tr>
<tr>
<td class="toggleDetail">4</td>
<td class="toggleDetail">5</td>
<td class="toggleDetail">6</td>
</tr>
</table>
<button>Remove event on a specific tr</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is HTML markup of 2 rows from my huge table (which generated by PHP and applied Datatables after that)
<tr url="?page=item&id=850">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/> 850</td>
<td> 9007</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">41</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">7</td>
<td style="text-align:center">11</td>
<td>09.02.2012</td>
</tr>
And here is second row
<tr url="?page=item&id=587">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/> 587</td>
<td> 779-59</td>
<td style="text-align:center">BR</td>
<td style="text-align:center">37</td>
<td style="text-align:center" id="qt">2</td>
<td style="text-align:center">15</td>
<td style="text-align:center">14</td>
<td>08.02.2012</td>
</tr>
Function below works for 90% rows. I really have no idea why this script works for second row from examples but doesn't do anything for first row. These 2 rows are nearly same.
$("td").not('.item_id').click(function(){
window.open ($(this).closest("tr").attr("url"));
});
How do you think, what can cause this problem?
Instead use this which will attach click handler on tr and ignore if clicked on checkbox or its containing cell. Try this.
$("tr").click(function(){
window.open($(this).attr("url"));
});
$("td.item_id").click(function(e){
e.stopPropagation();
});
Alertnatively you can also use event.target to check if it is checkbox don't do any this.
$("tr").click(function(e){
if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
window.open($(this).attr("url"));
}
});
I understand this piece:
$("td").not('.item_id').click(function(){
...
});
But could this piece be updated to perform better?
window.open ($(this).closest("tr").attr("url"));
Also, does the property url validate? You may want to use data attributes for a more predictable experience. Maybe this would work better:
<tr data-url="">
...
</tr>
with your window open even like this:
window.open( $(this).parent().attr("data-url") );
See this example: http://jsfiddle.net/Zuhrx/
its working HERE something else is wrong. Are you wrapping up the code in ready handler?
This table is in the loop. That is number of rows is dynamic.
<tr id="data">
<td><input name="cb" type="checkbox" value="val"></td>
<td>var 1</td>
<td>var 2</td>
<td>var 3</td>
</tr>
One edit button:
<input type="submit" value="edit" id="edit">
Each row has a checkbox. On click of the checkbox the entire row should be in the edit mode. I tried a lot of ways but still far away from the result. The second issue I faced is the id issue. Because the rows are dynamic so...
Probably what you are looking for is this, it uses a thing called "contentEditable" property, which enables editing HTML documents:
http://valums.com/edit-in-place/
More info can be found here: http://msdn.microsoft.com/en-us/library/ms537837%28v=vs.85%29.aspx
You say
This table is in the loop...
but you also have
<tr id="data">
id values must be unique within the document, so you'll have to modify that to not use ids.
But you don't need an id on each row. You can do this:
$('selector_for_the_table tr input[type=checkbox]').change(function() {
var row = $(this).closest('tr');
if (this.checked) {
// make the row editable
}
else {
// make the row uneditable
}
});
Live example
$("input[name=checkbox_name").bind('onchange',function(){
$(this).parent('tr').html();//This line fetch current tr to edit
});