I have a simple JQ task to complete and I can't find an answer. I have some generated HTML :-
<p align= center >
<table cellspacing=0 border=1>
<caption align=bottom class=captiondataframe></caption>
<tr><td>
<table border=0 class=tablecorporate>
<tbody>
<tr class= firstline >
<th> </th>
<th>WEEK </th>
<th>PERIOD </th>
<th>ILPROD </th>
<th>CNME </th>
<th>QTY </th>
<th>SP </th>
<th>REV </th>
<th>COST </th>
<th>VA </th>
<th>VAP</th>
</tr>
I need to remove the <tr><td> elements on line 4 using JQuery. I had thought about using $(tr:first).remove() but I suspect this will remove the wrong elements on subsequent page loads.
Any ideas?
Related
I have a simple table. I am looking to modify the number format of my 2nd last td element (where I fetch "SumPrices" to a currency rounded to the dollar. I can't seem to figure out the syntax.
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
You will presumably be populating the contents of the table from a source? At the point of insertion / DOM manipulation is when you would format the number from your data source to be a currency. You would likely do this in javascript as per your question tag.
i.e.
formattedNumber = format(dataSource)
td.innerText = formattedNumber
Example:
let cost = document.querySelector("#SumPrices").innerHTML.trim();
/*casting to number*/
cost = +cost;
cost = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
}).format(cost);
document.querySelector("#SumPrices").innerHTML = cost;
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
Lots of ways to format your number, you could use the regex as suggested by Sajeeb. You could also use a Intl.NumberFormatted. MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Great guide on using this for currency here: https://flaviocopes.com/how-to-format-number-as-currency-javascript/
Is this helpful?
You can use toFixed(precision) and regex for formating currency.
const td = document.querySelector("#SumPrices");
let price = parseInt(td.innerText);
price = price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
td.innerText = '$ ' + price;
table {
width: 100% !important;
}
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
I am generating a html table serverside with Java and sending it as a JSON to the client. So my response is a plain text looking like this:
<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>
My jQuery Script looks like this
if(reply.type === "highscores") {
var el = reply.value.replace(/\s+/g,' ').trim();
console.log(el);
$('.score-table').empty();
$('.score-table').html(el);
}
the console.log outputs the plain text quoted above.
Now the expected behavior is that the table will be displayed in the div with the class "score-table" but instead its just showing the following:
# Username Score 1 Marvin 3.0 2 testerich 3.0
So it basicly stripped al the html tags off the string? Im searching for hours now but did not find a solution for this.
The problem is your html response, not jQuery or js. Look at the first row of your html:
<table class="table"></table>
This doesn't make any sense. It needs to look like this:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td>Marvin</td>
<td>3.0</td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td>testerich</td>
<td>3.0</td>
</tr>
</tbody>
</table>
You have closed the Table right after you opened it..
<table class="table"></table>
update your html to this:
<table class="table"><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody></table>
Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.
You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/
You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>
You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>
I have the following table header:
<table id="time" class="new_table" border="0" cellpadding="2">
<thead>
<tr>
<th scope="col" rowspan="2" class="sortHead">
Unit
</th>
<th colspan="2" id="startDateHead" class="sortHead">
Start
</th>
<th colspan="2" id="endDateHead" class="sortHead">
End
</th>
<th rowspan="2" class="sortHead">
Distance (miles)
</th>
<th rowspan="2" class="sortHead">
Location
</th>
<th rowspan="2" class="sortHead">
Driver Name
</th>
</tr>
I am dynamically adding and removing img tags to the a tag when a user clicks a button. How can I remove all img tags within the a tags of this table when they are there?
I have tried:
$('#time th a').each(function() { $(this).remove('img'); });
An example of the img element that is added to the a tag is as follows:
Driver Name<img id="test" src="test.png" width="10">
How can I remove all img tags within the a tags of this table when
they are there.
Simply
$('#time th a img').remove();
Demo
Your attempt works if you flip the syntax a bit. I can't explain why your version didn't work. The docs indicate that it should.
$('#time th a').each(function() {
$(this).find('img').remove();
});
Demo
i modified your code little bit, i added .find("img") then use .remove()
$('#time th').each(function () {
$(this).find("img").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table id="time" class="new_table" border="0" cellpadding="2">
<thead>
<tr>
<th scope="col" rowspan="2" class="sortHead">
Driver Name<img id="test" src="arrow.png" width="10" />
</th>
<th scope="col" rowspan="2" class="sortHead">
Driver Mobile<img id="Img1" src="arrow.png" width="10">
</th>
</tr>
</thead>
</table>
Hope this will help you.
I started using datatables for my tables.
I now have a table with customers.
The first row is the table header. The second row is for a button to add a new customer.
The rest of the rows is the list of customers.
I want datatables to sort everything but not the "new customer" row. How to lock this row / exclude it from sorting?
Tried this:
<table class="muitable" border="0" cellpadding="0" cellspacing="3" id="customertable">
<thead>
<tr>
<th>
</th>
<th>
</th>
<th class="muitable bluehover hand" >
Name
</th>
<th class="muitable bluehover hand" >
Created
</th>
<th class="muitable bluehover hand" >
Status
</th>
</tr>
<tr>
<th width="16">
</th>
<th class="muitable hovernextcell" onclick="newcustomer()">
<img src="/common/images/plus.png" width="16" height="16" class="hand">
</th>
<th class="muitable bluecell">
New customer
</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
--contents--
</tbody>
</table>
The problem that arises now is that the "sorting buttons" are all over the place. When there is a value in the cell on the second row, this becomes the button, if theres not, it uses the first row for making a sorting button.
How to tell datatables to leave the second th row alone and just use the first row as headers?
You can put the "Add Customer" button in the header. Something like this:
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
<tr>
<th colspan="3">
<button>Add Customer</button>
</th>
</tr>
</thead>
Now dataTables will not sort the row.
jsFiddle: http://jsfiddle.net/Fd3ED/
Fixed it by by using two header rows and using the option http://datatables.net/ref#bSortCellsTop