How to hide entire table row<tr> in jQuery? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a very big table of data. For reference I'm printing below the HTML of only two records:
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
<tr class="evenRow">
<th width="33%" style="text-align:center;" class="question-id">Que ID</th>
<th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
<th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
</tr>
<tr class="oddRow">
<td class="question-id" align="center" valign="top">
QUE51550
</td>
<td class="question" align="center" valign="top">
QUE51545
Delete
</td>
<td class="question" align="center" valign="top">
90.84<br />
</td>
</tr>
<tr class="oddRow">
<td class="question-id" align="center" valign="top">
QUE51589
</td>
<td class="question" align="center" valign="top">
QUE51393
Delete
</td>
<td class="question" align="center" valign="top">
91.80<br />
</td>
</tr>
</table>
Now If I want to hide the respective entire row when user clicks on the Delete icon for that row, how should I achieve this with jQuery?

Use .closest() to find the first matching parent
$('.delete_question').on('click', function(){
$(this).closest('tr').hide();
// any other code, e.g. some ajax here
});
You may also want to prevent the default click event (which is set to go to #deletePopContent)
$('.delete_question').on('click', function(e){
e.preventDefault();
$(this).closest('tr').hide();
// any other code, e.g. some ajax here
});

Try this:
$(".delete_question").click(function(){
$(this).parents('tr').hide();
})
FIDDLE DEMO

try this
$(".delete_question").click(function(){
$(this).parents('tr:first').hide();
});
this will be helpful in nested tables also.

This is something that I have been working on for a project.
Fiddle - http://jsfiddle.net/jDNy4/
When the remove button is clicked, an inline confirmation is required. If confirmed the tr is removed.
HTML
<table>
<thead>
<tr>
<th>Current</th>
<th>2013</th>
<th>2012</th>
<th>2011</th>
<th>2010</th>
<th>2009</th>
<th>Budget</th>
<th>Proposed</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr><td>Add Row</td></tr>
</tfoot>
</table>
Javascript (jQuery 1.10.1)
$(document).ready(function(){
$(".add").click(function(){
$("tbody").append('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="removeSelection">Remove</td></tr>');
});
$("tbody").on('click','.remove',function(){
$(this).parent().append( $( '<div class="confirmation">YesNo</div>'))
$(this).remove();
});
$("tbody").on('click','.removeConfirm',function(){
$(this).parent().parent().parent().remove();
});
$("tbody").on('click','.removeCancel',function(){
$(this).parent().parent().append('Remove');
$(this).parent().remove();
});
});
$(document).ready(function() {
var form = $('#ajax'); // contact form
// form submit event
$(".text").blur(function(){
$.ajax({
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
success: function(data) {
url: 'functions.php'; // form action url
},
error: function(e) {
console.log(e)
}
});
});
});

Related

How to customize jAutoCalc plugin

I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say

Detect html table cell value change

How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});

Reveal fields if needed

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class
It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Make current HTML row editable

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.

Remove Row on Button Click

Trying to use the button "subtract" to remove the row it's clicked in.
"add" button is working well.
Html:
<table id="mytable" width="250px" border="0" cellspacing="0" cellpadding="0" style="text-align:center;>
<thead>
<tr class="product">
<th style="text-align:center;"><strong>Item</strong></th>
<th style="text-align:center;"><strong>Qty.</strong></th>
<th style="text-align:center;"><strong>Remarks</strong></th>
</tr>
</thead>
<tr name="product" class="product">
<td width="100px"><input type="text" width="100px" name="product" id="product" /></td>
<td width="5px"><input type="text" width="5px" size="1" maxlength="2" name="qty" id="qty" /></td>
<td width="100px"><input type="text" width="100px" height="14px" name="remarks" id="remarks" /></td>
<td><input type="submit" name="add" id="add" value="+" /></td>
<td><input type="submit" name="subtract" id="subtract" value="-" /></td>
</tr>
</table>
What I'm using:
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #product').val('');
$('#mytable tbody>tr:last #qty').val('');
$('#mytable tbody>tr:last #remarks').val('');
$('#mytable tbody>tr:last #add').val('+');
return false;
});
});
Could anyone help?
You can't use the same id more than one time on a page..
Thus if each row has a button to delete that row you probably want to use a class name for targeting the element.
Thus I suggest switching to classes like this:
<td><input type="submit" name="subtract" class="subtract" value="-" /></td>
then in JS
$("input.subtract").click(function() {
$(this).closest("tr").remove();
});
You also need to fix your add button since if you have more than one row you will have duplicate ID's
$("#subtract").click(function(e){
$(this).closest(".product").remove();
e.preventDefault();
});
I'd also recommend using a class instead of an id for subtract and add since you'll have multiple copies in the dom and it's considered bad manners to have duplicate IDs.
Similar to Matt's code, this would also work:
$("input.subtract").click(function() {
$(this).parents("tr").remove();
});
I don't know if one is better than the other, but I can confirm that this code works.

Categories