imagine i have 3 rows in a table, there is 3 input fields in every row. when i type something in the last input field it should add new row following that last row also when i hit backspace and all fields in latest row is empty then the new added row should be remove
i have no idea how to prevent another addition if the new row already appended to the table. this is what i've done so far.
$(document).ready(function(){
$("input[name=class_name\\[\\]]:last-child").keyup(function addNewRow(e){
var parent = $(this).closest('tr');
var tr = parent.clone();
if(e.keyCode != 8){
$("#classes tr:last-child").remove();
}else{
$("#classes").append(tr);
}
});
});
how about a check by selecting the last element again, and compare it to this? If it's not the same, then a row has already been added
Do you mean like this:
<table id="classes">
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
</table>
Javascript:
function process(){
var parent = $("#classes tr:last-child").closest('tr');
var tr = parent.clone();
if($("#classes tr:last-child td:last-child input").val() !== '')
{
$("#classes").append(tr);
}
else if($("#classes tr:last-child td").eq(0).find("input").val() === '' && $("#classes tr:last-child td").eq(1).find("input").val() === '' && $("#classes tr:last-child td").eq(2).find("input").val() === '')
{
$("#classes tr:last-child").remove();
}
}
Related
I have a table. This table contains rows and one of those columns in each row is a date. There are two input text boxes above the table; one input box represents the from date and the other represents the to date. Let's say the user only enters in the from date, I would like the table to display every row that contains that date and after. The opposite goes for if the user only enters the date in the TO input field; it would show all rows with dates leading up to that date. Along with if the user has a FROM AND TO date. It would catch the dates with the FROM date and the TO date along with every row that contains a date that is in between those.
What I have completed so far is an input field that will search the entire body of the table and output that row for whichever characters the user has entered.
JQuery
<script>
$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $(".fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).unbind('focus');
})
</script>
HTML
<input id="searchInput" type="text" placeholder="From"/>
<input id="searchInput" type="text" placeholder="To" >
<tbody class="fbody">
<tr>
<td>something</td>
<td>something</td>
<td>4/18/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/19/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/20/2016</td>
<td>something</td>
</tr>
</tbody>
Please Help. Thanks.
One big problem with your current code was the duplicate ids the DOM. The remainder of your logic was close, but I simplified it.
The snippet below should work for you. If the dates entered at the top are invalid they will be ignored completely. Note that since we're running on the input event, you're temporarily going to filter out all your rows because it is going to interpret years before they are filled-out to 4 digits. You may want to account for this differently, or potentially use the blur event instead.
$(".searchInput").on("input", function() {
var from = stringToDate($("#searchFrom").val());
var to = stringToDate($("#searchTo").val());
$(".fbody tr").each(function() {
var row = $(this);
var date = stringToDate(row.find("td").eq(2).text());
//show all rows by default
var show = true;
//if from date is valid and row date is less than from date, hide the row
if (from && date < from)
show = false;
//if to date is valid and row date is greater than to date, hide the row
if (to && date > to)
show = false;
if (show)
row.show();
else
row.hide();
});
});
//parse entered date. return NaN if invalid
function stringToDate(s) {
var ret = NaN;
var parts = s.split("/");
date = new Date(parts[2], parts[0], parts[1]);
if (!isNaN(date.getTime())) {
ret = date;
}
return ret;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="searchFrom" class="searchInput" type="text" placeholder="From"/>
<input id="searchTo" class="searchInput" type="text" placeholder="To" >
<table class="fbody" border="1">
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/18/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/19/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/20/2016</td>
<td>nothing</td>
</tr>
</table>
How to disable click on a table cell when the cell is empty or has value as zero.
I have a table in which when i click on a particular cell certain operations are performed. But I want the click event not to work when the table has cell value 0 or empty cell
$('#tablename').off('click','td').on('click', 'td', function(e) {
var column = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
var row = this.parentNode.cells[1];
if ($(row).text().trim() == "")
{
row = this.parentNode.cells[0];
}
var rowvalue = $(row).text();
var columnvalue = $(column).text();
}
$('td').click(function(){
var v = $(this).html();
if( $.trim(v) != '0' && v != '' ){
// your code
}
});
hope this helps you.
Try mapping all dom elements with zero or empty string values, then disable their default clicking functions:
var duds = $('td').map(function () {
if ($(this).html() == 0 || $(this).html() == "") {
return $(this);
}
});
duds.onclick(function (event) {
event.preventDefault();
});
This is an example, modify it according to your code:
HTML:
<table>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
</table>
CSS:
.visible {
display: block;
}
.hidden {
display: none;
}
JS:
var tds = $('td');
tds.click(function(){
var thisTable = $(this).html();
if( thisTable == '0' || thisTable == '' ){
var allInputs = tds.find('input');
allInputs.removeClass('visible');
allInputs.addClass('hidden');
}
});
I wont prefer to give you the whole solution but the just a hint. You should use following line of code
<td onclick="return false;">Content</td>
This is inline event handling - you can always use jquery to avoid inline event handling - this would also be a good homework for you.
you can use this css property
pointer-events: none;
and you can refer more in this link:
here is my sample code
<table id="accessListTable">
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
</tr>
</table>
E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.
Please any help!
You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead
$(function ($) {
$(".groupHeadCheck").on("click", function (event) {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
})
});
Demo: Fiddle
I am sure it can be done in a prettier manner, but this is the basic idea:
$("table tbody").on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
allCbs.prop('checked', isChecked);
} else {
var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
var allSlaves = allCbs.not(".groupHeadCheck");
var master = allCbs.filter(".groupHeadCheck");
var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
master.prop("checked", allChecked);
}
});
and if you need to run the code to force the check all state
$(".groupHead").next().find("[type=checkbox]").change();
JSFiddle
This would check all if the first is checked (or uncheck all)
$(document).on('click', '.groupHeadCheck',function() {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});
you could fiddle a bit with your classes (or IDs) to make it right for you
I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.
You could use the class name to apply the same logic.
First, here is what a check all checkbox looked like:
<td>
<input type="checkbox" onchange="checkAll(this, 'S_');" />
</td>
Then the javascript function it calls when clicked:
function checkAll(sender, match)
{
var table = $(sender).closest('table').get(0);
var selector = "input[type='checkbox'][name^='" + match + "']";
for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
{
var cb = $(table.rows[i]).find(selector).get(0);
if (cb === undefined)
break;
if ($(cb).is(':enabled'))
cb.checked = sender.checked;
}
}
So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.
so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
How would you grab all the id numbers from the tbody rows from the Select all checkbox?
jQuery
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
HTML
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>
You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});
Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/
You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
jsFiddle
Use find instead of children and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/
I know this doesn't quite answer the question using children, but you can use $('#tbody').find('input') to find all the input fields within an element.
Rows (id='row_property_'+number) in table contain four columns :
select element (id='multiple_object_type_'+number)
input type="text" (id='multiple_instance_id_'+number)
nested table (id='table_properties_'+number)
input type="button"
How to iterate through each row and collect data in two arrays from select and input with jquery ?
Ok, add classes to the select and input elements so that the table looks something like this:
<table id="myTable">
<tr>
<td><select class="rowSelect"></select></td>
<td><input type="text" class="rowInput" /></td>
... etc ...
</tr>
</table>
Then you can get the values from each row like this in jquery:
$(function(){
$('#myTable tr').each(function(){
alert('select value is '+$(this).find('select.rowSelect'));
alert('input value is '+$(this).find('input.rowInput'));
});
});
var selectArray = $('table tr td > select').map(function() {
return $(this).val();
}).get();
var inputArray = $('table tr td > input:text').map(function() {
return $(this).val();
}).get();
This might do what you want.
JSFiddle Example