<table>
<tr class="clicke">
<td colspan="2">
<img src="images/title_.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>
<tr class="clicke">
<td colspan="2">
<img src="images/informati.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_odd">
<td>Present Address</td>
<td>
<input type="text" name="Present Address" style="width:250px;" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td>
<input type="text" name="City" value="credit-application.php" />
</td>
</tr>
</table>
when click the clicke class tr, the following tr will hide with slow up untill the next clicke tr. when click again, the following tr content will show with slow down.
my code:
$(document).ready(function(){
$(".clicke").click(function(){
$("tr").slideToggle("slow");
}
);
});
but all the tr are effect, which are not i want, how to determine the related tr content. thank you
i am sorry maybe i didn't say the question clear.
eg:
<tr class="clicke">
</tr>
click the tr. those tr will be show/hide
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>
EDIT: I see you've updated your question to make your intent clearer. I think the best way to achieve what you want is to group the form fields in one element, and toggle that element.
I think this is preferable to animating multiple table rows simultaneously, since I assume your goal is to animate all the associated fields at once, in a single animation.
Here's how you might do that:
<h2 class="clicke">CLICK ME #1</h2>
<table>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td><input type="text" name="realname" /></td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td><input type="text" name="Birth Date" /></td>
</tr>
</table>
<h2 class="clicke">CLICK ME #2</h2>
<table>
<tr class="tbl_odd">
<td>Present Address</td>
<td><input type="text" name="Present Address" /></td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td><input type="text" name="City" /></td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('.clicke').next('table').hide();
$('.clicke').click(function(){
$(this).next('table').slideToggle('slow');
});
});
Here is a demo: http://jsfiddle.net/ZvFQm/1/
I'm not secure to have correctly understend, but this could be a solution:
$(".clicke").toggle(
function(){
$(this).parent().find("tr").eq(1).hide();
},function(){
$(this).parent().find("tr").eq(1).show();
} );
See HERE to see the result
Please try editing the table format like in demo
Demo here
All it does is find next .slide table and perform slideToggle
$(".clicke").click(function(){
$(this).next('tr').find('.slide').slideToggle("slow");
});
Try This, It will work.
$(document).ready(function(){
$(".clicke").click(function(){
$(this).nextAll("tr:eq(0), tr:eq(1)").slideToggle("slow");
});
});
Related
I'm able to generate more textboxes for user to input variables on click of a link. what i've noticed is when the new row of textboxes are generated, it generates with name text and id as id. But i want it to have the same names of the original or parent textboxes.
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>
JS
$(document).ready(function()
{
$('.add_more').click(function(){
var id=$(':text').length;
$('#more_vechicle td').append('<input class="register-input" type="text" id='+id+' name="text'+id+'">');
});
});
Use a .each() loop to loop over the TDs. Then you can get the first input that's in each TD, clone it, and give it a new ID.
$('.add_more').click(function() {
$('#more_vechicle td').each(function() {
var these_inputs = $(this).find(".register-input");
var id = these_inputs.length;
var new_input = these_inputs.first().clone(true).val('');
new_input.attr('id', function(i, old_id) {
return old_id + id;
});
$(this).append(new_input);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>
The solution you're looking for is jquery's clone() function (http://api.jquery.com/clone/). Just clone #more_vehicle and insert it before the continue button.
$('.add_more').click(function() {
$('#more_vechicle').clone()
.attr('id', null) /* removing id attribute for the cloned
* tr so there is only one elemnt with that id
*/
.insertBefore('#append_anchor');
Be aware that the default behavior of clone() is to not copy event handler from the parent element.
I'd also suggest to make sure every car gets it's own tr. See the following fiddle:
https://jsfiddle.net/jcvnos9w/
I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>
The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!
the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}
I have a working calculator on my website that is used for business expense savings estimation. currently the calculator auto-calculates in real time as the user inputs numbers. i would like the user to have to click a calculate button in order to see any results. could someone please help as i am having a hard time adjusting the code myself. here is the current code:
function calc() {
var cost = document.getElementById('phone').value * (.30) +
document.getElementById('energy').value * (.05) +
document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
(.35) + document.getElementById('waste').value * (.5) +
document.getElementById('payroll').value * (.5);
document.getElementById('cost').value = (cost * 12).toFixed(2);
}
<form name="form1" method="post" action="">
<table width="33%" align="center">
<tr>
<td valign="top" style="text-align: center"><strong>
Category</strong>
</td>
<td style="text-align: center"><strong>Monthly Expenses</strong>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="47%" valign="top">Telephone & Internet</td>
<td width="53%">
<input name="phone" id="phone" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
<td valign="top">Energy</td>
<td>
<input name="energy" id="energy" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Cell Phone</td>
<td>
<input name="cell" id="cell" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Office Supplies</td>
<td>
<input name="office" id="office" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Merchant Card Fees</td>
<td>
<input name="card" id="card" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Waste Removal</td>
<td>
<input name="waste" id="waste" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td height="31" valign="top">3rd Party Payroll Fees</td>
<td>
<input name="payroll" id="payroll" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
<div align="center">
<table width="33%" border="0">
<tr>
<td width="54%" height="31" valign="top"><strong>Estimated Annual
Savings:</strong>
</td>
<td width="46%">
<textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
</td>
</tr>
Currently, your inputs are set up to call calc() whenever their onchange event is fired. This happens whenever the value is changed and the input is blurred (no longer in focus).
Remove the onchange="calc()" attribute on all your inputs, and add a button whever it makes sense to on your page with onclick="calc()":
<button onclick="calc()">Calculate</button>
Place button with Javascript event outside form
<button onclick="calc();">Calculate</button>
Delete all onchange="calc()" and add this html code to your page, that's it.
<button onclick="calc()">Calculate Expenses</button>
Remove the call to onchange="calc()" from all.
Put <div align="center">
<table width="33%" border="0">
<tr>
<td align="Center">
<input type="button" value="Click To Calculate" onclick="calc()" />
</td>
</tr>
</div>
I am having a function in Javascript which is updating the textbox in the div to get updated html of div but it gives me blank value instead of updated one, Is anybody having idea why? Initialy the div is blank as below, and then I
<div id="editSeriesData">
<table cellpadding="5" cellspacing="0" width="400px">
<tr>
<td class="tableCell">
<table cellpadding="5" cellspacing="0">
<tr>
<td>Series</td>
<td><input type="text" value="" name="seriesid" id="seriesid" readonly /></td>
</tr>
<tr>
<td>Name</td>
<td width="30%"><input type="text" name="seriesname" id="seriesname" value="" /></td>
</tr>
<tr valign="top">
<td>Description</td>
<td><textarea rows="5" cols="50" name="description" id="description"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="submit" id="submit" value="Submit" onclick="javascript:validateFrm();" class="text ui-widget-content ui-corner-all" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my Javascript method is:
function addEditSeries(seriesId){
document.getElementById('seriesid').value=seriesId;
document.getElementById('seriesname').value="dummy";
document.getElementById('description').value="dummy";
setTimeout(function(){
alert($('#editSeriesData').html());
showwindow('','','280','500','Product-Pack Series',true, true,$('#editSeriesData').html());
}, 1000);
}
The alert() shows me whole div but without the updated value which I updated in addEditSeries() method. The value of the input fields remain as default.
Cosider this image:
How I can select it without it's ID with jQuery? I mean how I can select it like this statement:
Find Input in Row with Code=1000 and Column Desc2
thanks
Edit 1)
HTML Code
<table border="1" width="300px">
<tr>
<td>
Desc2
</td>
<td>
Desc1
</td>
<td>
Code
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text1" type="text" />
</td>
<td>
</td>
<td>
1000
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text2" type="text" />
</td>
<td>
</td>
<td>
1001
</td>
<tr>
<td bgcolor="#CCCCB3" class="style1">
<input id="Text3" type="text" />
</td>
<td class="style1">
</td>
<td class="style1">
1002
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text4" type="text" />
</td>
<td>
</td>
<td>
1003
</td>
</tr>
</table>
Select the last cell, filter the row whose last cell has a value which is equal to "1000", and select the first input element of the collection:
$("table td:last-of-type").filter(function(){
return $(this).text() == "1000";
}).parent().find("input:first");
For constructing such selectors, you can use the following:
:eq() and .eq()
:nth-child() (for a specific child position only!)
Warning: Do not fall in the trap of contains(). This method select all elements which contain the given phrase. .contains(1000) will also select <td>10000</td>.