Problems with handling html as response from a server in plain text - javascript

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>

Related

I need to check if any <td> in a html table is empty/null as in after the page loads it only returns <td></td> and change it to <td><p>$0</p></td>

example of the table
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>
Now the way this is really written, data will be pushed into each td from an API, some times that API is down, and I would like to use jquery to check if a td has anything displaying in it and if it doesnt I want there to be a string with an error message in the td. This is the jquery im trying currently
var empty = $("td").trim().filter(function () { return this.value.trim() === null })
empty.addClass("errorDefault");
if ($("td").hasClass("errorDefault")) {
this.val("$0");
this.text("$0");
this.html("<p>There was an error getting data</p>");
}

There is no .trim() in jQuery
string trim() is not going to return null.
table cells do not have value
$("td").hasClass("errorDefault") only looks at first element
$("tbody td")
.filter((_, td) => !td.textContent.trim().length)
.addClass("errorDefault")
.text("$0");
.errorDefault {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>
If it is truly empty, CSS can do it.
tbody td:empty{
background: red;
}
tbody td:empty:after {
content: "$0";
}
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>

I need to make the sum of an column in javascript [duplicate]

This question already has answers here:
How to sum a single table column using Javascript?
(3 answers)
How do I sum the price column from HTML table using JavaScript?
(4 answers)
Closed 1 year ago.
This is html code that i can't edit :
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>
My question is :
How do i do that in code(javascript)?
I have something in my head but i don t know how to write that. What i have in head is: i declare variable for expenses,or using this queryselector(but i don t know how to point at specific td, because i have 2 td's in 1 tr) and after i can make a function with sum of that column, but i don't know how to write that in code. Can someone help me

First, you need to select all nodes that have .expense. Then you should iterate and calculate the total. After that write the total into #total-expenses.
// select nodes for expense
const expenceNodes = document.querySelectorAll('.expense');
let total = 0.0;
// calculating total
expenceNodes.forEach(node => {
total += parseFloat(node.innerText);
})
// write total
document.getElementById('total-expenses').innerText = total.toFixed(2);
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>

How can I identify an element with no class/ID and won't always be the same nth child?

I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.
The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.
The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?

You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.
$(document).ready(function() {
var yourVal = $('td:contains("2.2")').next('td').text();
console.log(yourVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>

You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.
const tds = document.querySelectorAll("td")
for (let td of tds) {
if (td.innerText.includes("Larry")) {
const element = td.nextElementSibling
console.log(element.innerText)
break;
}
}
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
If you like jQuery, use this.
const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>

Cut Div Content to table body with jquery

i have a table like this:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="div1">
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</div>
I want to cut div1 content and paste to table tbody tag with jquery
the result that i need is:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</tbody>
</table>
also i use this code but doesn't work:
<script>
$(document).ready(function () {
$("#div1").replaceAll("tbody");
}
</script>
I tried with some jquery method but mostly copy all div(div tag with content)
but i need only cut content of div.
please help me

This might help you.
$('#div1').contents().appendTo('tbody')

How to make two column to repeat for one item in the list?

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>

Categories

Resources