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 :)
Related
So let's skip the the table headers to my table body. I have a populated table:
HTML:
<tbody>
<tr *ngFor="let e of emails; let i = index">
<td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
<td id="subject-{{i}}">{{e.sender}}</td>
<td id="subject-{{i}}">{{e.subject}}</td>
<td id="subject-{{i}}">{{e.date}}</td>
</tbody>
I want the table whole row to display a CSS class when the user checks the checkbox. And then the color should go back to normal when the user deselects. Just UI stuff to show the user that an email has been selected. I currently have an empty CSS and .ts file.
The way you have done it here is more involved because presumably you have some logic inside addToSelectedList event that will add/remove the email depending on the checked state. The easiest way is to add a property on the email entity isSelected, and do this:
<input ... [checked]="e.isSelected" >
On your tr add the ngclass binding as suggested by others as follows:
<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...
Other observation in your code there isn't a closing tr that should be wrapping around all the tds.
Not an Angular expert, but you can achieve just that using a JS onchange event bound to your checkbox:
$(".box").on("change", function() {
$(this).parents("tr").toggleClass("highlight");
});
.highlight {
background-color: #ffff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Label 1</td>
<td><input type="checkbox" class="box"/></td>
</tr>
<tr>
<td>Label 2</td>
<td><input type="checkbox" class="box"/></td>
</tr>
</table>
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
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
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?
I have a table that contains a row. In that row, there is a file input that has been styled to look like a button. I need the user to choose an image, then enter some information about that image in the same row. Once they do that, if they need to add another image, they will click a button that creates a new row, which contains a new file input etc.
The problem that I have is in the JavaScript that creates the new row. The row is created fine. However, I think the issue begins with the file input not having a new id. So, I have attempted to throw it in some sort of loop with a count and then assign that file input the count number on each click of the add row button. I've failed miserably.
Here is a look at the JS:
/* add image */
$(document).ready(function() {
var clicks = 0;
$("#buttons .addimage").live('click', function() {
// Code between here will only run when the a link is clicked and has a name of addimage
$("table#dataTable tr:last").after('<tr><td><input type="checkbox" name="chk"/></td><td><span class="file-wrapper"><input type="file" name="photo" id="photo" /><span class="button">Choose a Photo</span></span></td><td></td><td><select name="imagetype" id="imagetype" class="required"><option value="thumbnail">Thumbnail</option><option value="other">Other</option></select></td></tr>');
return false;
});
});
The HTML Table:
<table id="dataTable">
<!-- All attributes will be sorted alphabetically. Default should be sorted by Status. Errors should be on top -->
<thead>
<tr>
<!-- Table Header -->
<th>Select</th>
<th>File Name</th>
<th>File Size</th>
<th>File Type</th>
</tr>
</thead>
<tbody>
<tr>
<!-- First Record / Dynamically populated/For mock up purposes only -->
<td><input type="checkbox" name="chk" /></td>
<td><span class="file-wrapper"><input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span></span></td>
<td></td>
<td><select name="imagetype" id="imagetype" class="required">
<option value="thumbnail">
Thumbnail
</option>
<option value="other">
Other
</option>
</select></td>
</tr>
</tbody>
So, you'll notice that the JS file doesn't dynamically create a new file input id. How would I go about doing this? Am I thinking about this the right way?