In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.
Related
Here I want to add new row under name and age. The colspan of ApplyPeople will be added to 1.But I failed, here is my JS code:
$(document).ready(function()
{
$('#add').click(function () {
newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>';
$('#apply').rowspan = $('#apply').rowspan + 1;
$('#staTable tr:xie').append(newrow);
});
}
Before click, html code:
<tr>
<td style="width:20%" rowspan=1 id="apply">
applyPeople<br />
<input type="button" id="add" value="add">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%" colspan=2>letter</td>
</tr>
After click, html code:
<tr>
<td style="width:20%" rowspan=2 id="apply">
apply<br />
<input type="button" id="add" value="add">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr id="xie" >
<td style="width:25%">John</td>
<td style="width:55%">20</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%" colspan=2>letter</td>
</tr>
What is wrong with my code? Who can help me?
You can use jQuery's .attr() to achieve what you want:
Comments in code for js, - and also in your html, start your rowspan off as 2 (or the number of rows you start in your table) and get rid of the colspan in the second row - the rowspan handles the missing column
$('#addPeople').click(function () {
newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>';
var rowspan = parseInt($('#appPeople').attr('rowspan')) + 1; // use attr to get the rowspan and parseInt to make it an int
$('#appPeople').attr('rowspan', rowspan); // use attr to set the rowspan
$('#staTable tr:eq(0)').after(newrow); // use after if you want to add it after the first row, eq(0) means get the first instance of
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="staTable">
<tr>
<td style="width:20%" rowspan=2 id="appPeople">
applyPeople<br />
<input type="button" id="addPeople" value="">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%">letter</td>
</tr>
</table>
I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is an example of a table with input forms inside toggle-able hidden rows that I'm trying to get to behave properly.
As you can see, I have hidden rows that contain a text input and a submit button.
When you enter in keywords in the search input, the filter expands the hidden row, as well as expands all the hidden rows if you clear the search input.
I need to be able to have the search function not expand/show the hidden rows, yet have the hidden rows still be accessible when you click on the vote link to show the row.
It would also be nice to have the search function hide any of the hide/show rows that have been toggled previously when a new search is entered.
https://jsfiddle.net/zoo6mvso/1/
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<th><b>Item</b>
</th>
<th><b>Price (Dollars)</b>
</th>
<th><b>Price (Euros)</b>
</th>
<th><b>Vote</b>
</th>
</tr>
<tr>
<td>Cheese Burger</td>
<td> </td>
<td>20</td>
<td>Vote
</td>
</tr>
<tr class="cat1" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Cheeseburger Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
<td>Burrito</td>
<td> </td>
<td>20</td>
<td>Vote
</td>
</tr>
<tr class="cat2" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Burrito Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
<td>Pizza</td>
<td> </td>
<td>10</td>
<td>Vote
</td>
</tr>
<tr class="cat3" style="display:none">
<td colspan="4" style="white-space: nowrap">Enter Pizza Price:
<input type="text" maxlength="4" name="quantity" value="" class="input" /> Submit
</td>
</tr>
<tr>
</table>
$(document).ready(function(){
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Don't select the hidden tr elements when you find the tr elemnets
var $rows = $('#table tr:not(:hidden)');
Demo: Fiddle
Another option is to dd a class to the hidden tr like
<tr class="cat1 hidden" style="display:none">
then
var $rows = $('#table tr:not(.hidden)');
Demo: Fiddle
I have tried hide and show html inner table using jquery. I want to hide the table when page loads then after click search button , table will show with values.
But the below code is hidding intially, after click the search button, its blinking and hiding again.Please advise what is the wrong here.
$(document).ready(function() {
$("#historylist").hide();
$("#historysearch").click(function() {
$("#historylist").show();
});
// }
});
<table id="searchTbl" width="800" >
<tr>
<td valign="top">Release No</td>
<td valign="top">
<input type="text" name="releaseNo" value="" style="width:200" />
</td>
<td valign="top"><input type="button" value="Search" onClick="commit()" style="width:80" id="historysearch"/></td>
</tr>
<br /><br />
<table border="1" cellpadding="2" cellspacing="0" id="historylist">
<tr>
<th><font size="-1">Header1</font></th>
<th><font size="-1">Header2</font></th>
<th><font size="-1">Header3</font></th>
<th><font size="-1">Header4</font></th>
<th><font size="-1">Header5</font></th>
</tr>
</table>
</table>
function commit(){
document.menu.cmd.value='search';
document.menu.submit();
}
Can you try this,
function commit(){
$("#historylist").toggle();
}
I have an HTML document that is generated on the server side using JSP. The output that is produced lists a number of records as HTML. Each record contains a single master record and each master record is associated with several child records.
The master record is displayed in one row with a small icon next to the record id. When clicked, the record expands and the child records are displayed (i.e a DIV layer is made visible). Here is an example HTML output of the HTML.
<!-- Record 1 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=352></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=43></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=44></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=45></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=46></td>
</tr>
</table>
</td>
</tr>
<!-- Record 2 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=353></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=53></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=54></td>
</tr>
</table>
</td>
</tr>
Next to each record (master or child), there is a checkbox. When the master record's checkbox is checked, all related child records for that specific group of child records are also checked. This is done using old school javascript by just going through all elements and looking at the values and checking them if they are related to the master record.
There is an onClick event on each master record checkbox. When clicked (i.e. when the master record is checked) i pass the child records to the javascript function. This is passed using Document.theForm.child. This passes all the child records as an array. I also pass the number of records associated with the master record clicked. And i also pass the value of the first child record.
Inside the javascript function i just go through the array of child records until i get to the one which matches the value i passed into the function which matches the first child record. I then use the number of child records to set the next n records to checked.
I know need to now modify this so that if all child records (related to a specific master record) are unchecked, the master record should also be unchecked. I want to modify the whole thing to use Jquery but without modifying the names and values of the checkboxes. I am not very familiar with Jquery so any guidance will be appreciated.
Thanks
Edit
What i want to do is to change it so that i can do to things.
When the checkbox for the master row is selected all children are selected
When the checkbox for teh master row is unselected all childrean are unselected
When any checkbox is unselected, a check is carried out to check that there is at least one child row selected otherwise the master row is unselected.
To do this, i will add a class element to each child row. The value of the class will be the value of the master row checkbox. I can then add an onClick event on the master checkbox passing the value. I would use that value to check/uncheck any checkbox with that value.
Each group of checkboxes will have a different class value depending on the master row. I have seen a couple of Jquery examples but i cant find examples of how to check/uncheck checkboxes based on values/id passed to a function. Here is an example i am working on now
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall2"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall3"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall4"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
</table>
</BODY>
</HTML>
The example has 4 groups of records. Each master checkbox has an id which is the value used for each child as the 'class' value. How can i change each of the master checkboxes to include an onClick event which passes the id of the checkbox that was clicked. This Id is then used on the Jquery function to check any checkbox with a class value that matches the passed id. (similar for unchecking as well).
Thanks
EDIT:
New Requirements: http://jsfiddle.net/mdJQc/2/
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = !! table.find('input:checked').length,
isMaster = !master.length;
if (!isEmpty) master.attr('checked', false);
if (isMaster) {
$(this).closest('tr').next('tr').find('input').attr('checked', $(this).is(':checked'))
}
})
You said you already have the check all code, so I just implemented the empty check:
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = ! table.find('input:checked').length;
if (isEmpty) master.attr('checked', false);
})
Example