I have a html table with rows.
Each row has a action column with a button and when pressing this button i want to show a input field in the second td which the user have to fill out and submit, first then the event/click is completed else the input should disappear again.
<table>
<thead>
<tr>
<th>ID</th>
<th>user-Input</th>
<th>data3</th>
<th>data4</th>
<th>data5</th>
<th>Action</th>
</tr>
</thead>
<tbody id="customers">
<tr>
<td>1</td><td></td><td>data</td><td>data</td><td>data</td><td><button type='button' class='acceptCustomerBut'>GO</button></td>
</tr>
</tbody>
</table>
javascript/jquery
$(document).on("click", ".acceptCustomerBut", function(e) {
e.preventDefault();
$(this).parent().parent().find("td:nth-child(2)").html("<input type='number' name='customer_id'>");
// DO SOMETHING
});
DO SOMETHING - im thinking if its possible to make the function detect if the input has received values with jquery's .on("change") if not, hide the input field?
Try this,
$(document).on("click", ".acceptCustomerBut", function(e) {
e.preventDefault();
var $td=$(this).closest('tr').find("td:eq(1)");
if($td.find('input').length){ // check input length, if exists then hide it
$td.find('input').hide();
} else { // else add it
$td.html("<input type='number' name='customer_id'>");
}
});
Live Demo
Related
How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:
$('#QCStatus tr td').bind('click',function() {
return false;
});
//QCStatus is the id of the grid
To enable click on a cell, in the same row that is being edited, I tried:
$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
return true;
});
But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?
You can exclude the selected row it with :not() here:
$('#QCStatus tr:not(.selected) td').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
<tr><td>click</td></tr>
<tr class='selected'><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
</table>
<pre></pre>
This will bind the click on all the tds which are not the children of tr.selected.
As per your comment you can add more:
How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"]?
$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.
$('tr').on('click', function() {
console.log('clicked!');
});
$('.disabled').on('click', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
</table>
Fiddle here
add a "disabled" attribute to those buttons where you want to disable the click.
for a div disabled attribute doesn't work.
in those cases use "pointer-events:none;" in your css of that particular divs.
I have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle
this is a simple demonstration of what i have, this is a table with a single row in it,
<table id="test_table">
<tr>
<td>name</td>
<td>age</td>
<td>action</td>
</tr>
<tr>
<td>test name</td>
<td>20</td>
<td class="delete">delete</td>
</tr>
</table>
and if i click on the delete td this row would be hidden
$('.delete').click(function(){
$(this).parent().parent().hide();
});
and i have a simple form of name and age, when i click on the add button it appends it to the table
$('#test_input').click(function(){
var name = $('#name').val();
var age = $('#age').val();
$('#text_table').append('<tr><td>'+name+'</td><td>'+age+'</td><td class="delete">delete</td></tr>');
});
the problem is i if i click on the new appended row it would hide like its not even there, what ever i try to do using the appended row, it wouldn't take it, is there something wrong that im doing ?
$('#test_table') should be $('#test-table').
And you should bind the on-click on the added row.
Another solution is to create a delegated event.
$('body').on('click', '.delete', function() {
$(this).parent().parent().hide();
});
Table contains 2 columns. each column have form elements like text box and dropdown box. what i want is , when i click the row i have to call javascript function. My problem is, when i enter value in textbox or select value from dropdown that time also javascript function has called. How to prevent this. i dont want to fire the javascript function when entering text box and select the value from dropdown.
jQuery("#testParam tbody tr").on("click", function(event) {
var position = paramTable.fnGetPosition(this); // getting the clicked row position
//alert(position);
createTable();
});
function createTable(){
alert("clicked");
}
<table id="testParam">
<thead>
<tr>
<th class="no-sort">
Name
</th>
<th class="no-sort">
Type
</th>
</tr>
</thead>
<tbody>
<tr id="paramRow1">
<td><g:textField name="name1" id="name1" required="" value="${testName}" /></td>
<td><g:select name="type1" noSelection="['':'-Select-']"
id="type1"
from="${testParameterInstance?.constraints?.type?.inList}"
required="" value="${testParameterInstance?.type}"
valueMessagePrefix="testParameter.type" /></td>
</tr>
</tbody>
</table>
try this way
$('#name1,#type1').on('click',function(event){
event.stopPropagation();
});
Happy Coding :)
I am using MVC3, EF Model first on my project.
I have a view with 4 tables and then I have a CustomPickedTable, whenever a user click on a row inside those 4 tables that row moves to CustomPickedTable Table this is the code for it:
<script type="text/javascript">
$(function () {
$('.questionsForSubjectType tbody tr').click(function () {
var origin = $(this).closest('table').attr('id');
$(this)
.appendTo('#CustomPickedTable tbody')
.click({ origin: origin }, function (evt) {
$(this).appendTo('#' + evt.data.origin);
});
});
});
</script>
What I am looking for is some kind of validation that when a user clicks on the submit button there should be a rule that make sures that atleast one row in each of those 4 tables must be moved to CustomPickedTable if not it should not post the form but give the user an errormessage.
This is one of my 4 tables, these get generated by a foreach loop with razor in MVC
<div class="questionsForSubjectType" id="questionsForSubjectType_1">
<table class="box-style2" id="RandomID_c5b9bc7a-2a51-4fe5-bd3a-75b4b3934ade">
<thead>
<tr>
<th>
Kompetens
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-question-id="16">Har konsulten Förmåga att lära sig nytt?</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-question-id="17">Har konsulten rätt kompetens?</td>
</tr>
</tbody>
</table>
</div>
My custom table:
<table id="CustomPickedTable" class="box-style2">
<thead><tr><th>Choosen Questions</th></tr></thead>
<tbody>
</tbody>
</table>
Thanks in advance!
There might be a better way.
But i would add a data-attribute or some class to each of the TD's you can move, and on submit check for each required value.
Created an example here: http://jsfiddle.net/y35Qf/1/
Basicly i added an attribute called data-row, and each table has its own value, on submit i require each of these values to be in the CustomPickedTable - if not i alert that something is missing - else alert success.
You could easily add so you alert which rows are misssing or any other validation you would want.
Is this what you wanted?