I have a table similar to the following:
Level
$1,000
$500
$100
Other Amount
The HTML is generated by a web based program that allows you to enter your desired values but does not provide an option to re-order them.
The values are ordered highest to lowest but I need them to be lowest to highest.
Here is the HTML that produced the table:
<table width="100%" id="TablePledgeLevelInner">
<tbody>
<tr>
<td width="1%"> </td>
<td>Level<br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 1000);" value="764853" name="PledgeLevelID">
</td>
<td>$1,000 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 500);" value="764915" name="PledgeLevelID">
</td>
<td>$500 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 100);" value="764921" name="PledgeLevelID">
</td>
<td>$100 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 0);" value="764922" name="PledgeLevelID">
</td>
<td>Other Amount <br>
</td>
</tr>
</tbody>
</table>
How would I reorder this table using Jquery or Javascript?
Thanks in advance. Any help is greatly appreciated.
Use jQuery DataTables. It'll let you sort the output and provide loads of other nice functionality out of the box.
Related
Below is code snippet of my HTML page:
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Aniruddh </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Ajay <td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Vijay </td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group1 </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group2 <td>
</tr>
</table>
</div>
I am developing a Web application where I send messages to users by the push of a button. I have two HTML tables on my page namely Contacts with "id"="cntList" and Groups "id"="grpList"; where both tables will have names and a checkbox corresponding to them.
When I click on some contact in Contacts table or a group in the Group table, my code should understand whether it is from a Contacts table or it is a Group table and call the function to send the message accordingly.
I am getting how to start with JQuery in this?
You can retrieve the id of the clicked parent table element within event handler by checking the .id property of this, or event.currentTarget using .closest() with table[id$=List] as selector passed, .attr() with "id" as parameter
var selector = "table[id$=List]";
$(selector + " :checkbox").click(function(event) {
console.log($(this).closest(selector).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Aniruddh</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Ajay
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Vijay</td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group2
<td>
</tr>
</table>
</div>
I have the below table format . I want to implement jquery functionality when the user click on cell of Row1 of this table.
I want to merge or split the cell based on the user action.
Say , the user click on "7-8" then it has to split into two different cells like 7 and 8 with proper data.
Say , the user click on "2" then the nearest left cell has to be get merged and form a cell like "1-2" with proper data. (As given in "7-8").
Same way if he click on "4" then it should create "3-4" with proper data .
Here Row2 and Row5 cells span for 2 columns in case of merge.(Please see the existing table).
I am trying to implement this by changing the colspan values but it is not viable.
Please suggest a cleaner solution.
<table border=1 style="height:200px; border-top:0px;">
<tbody id="MySettings">
<tr>
<td width="15%">Row1</td>
<td colspan="0" width="10%">1</td>
<td colspan="0" width="10%">2<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="0" width="10%">3</td>
<td colspan="0" width="10%">4<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
<td colspan="0" width="10%">5</td>
<td colspan="0" width="10%">6<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="2" width="10%">7 - 8<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
</tr>
<tr id="MySettings_2">
<td>Row2</td>
<td colspan="0"> <input type="checkbox" name="CheckBox1" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox2" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox3" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox4" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox5" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox6" value="1" checked="true"></td>
<td colspan="2"> <input type="checkbox" name="CheckBox7_8" value="1" checked="true"></td>
</tr>
<tr id="Row3">
<td>Row3</td>
<td>88.98</td>
<td>33.98</td>
<td>43.34</td>
<td>123.98</td>
<td>0</td>
<td>65.43</td>
<td>33.19</td>
<td>27.8</td>
</tr>
<tr id="Row4">
<td>Row4</td>
<td>101</td>
<td>340</td>
<td>555.8</td>
<td>21</td>
<td>0</td>
<td>56</td>
<td>456</td>
<td>10</td>
</tr>
<tr id="Row5">
<td>Row5</td>
<td colspan="0">7</td>
<td colspan="0">3</td>
<td colspan="0">6</td>
<td colspan="0">0</td>
<td colspan="0">0</td>
<td colspan="0"> 4</td>
<td colspan="2">10</td>
</tr>
</tbody>
</table>
Thanks
JSfiddle Link
$("#MySettings tr:first-child .col2").click(function() {
if($(this).attr("colspan") == "0") {
$(this).attr("colspan", "2");
$(this).prev().css("display","none");
$(this).text("1-2");
}
else {
$(this).attr("colspan", "0");
$(this).text("2");
$(this).prev().css("display","table-cell");
}
});
Hope above Link help you. :)
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>
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>.