Trying to replace innerhtml of row with responseText - javascript

I have the following table in my HTML body:
<table>
<tr id="0">
<td></td>
<td></td>
<td></td>
</tr>
<tr id="1">
<td></td>
<td></td>
<td></td>
</tr>
</table>
My httpRequest.responseText returns the following:
<td class="c1">c<td>
<td class="c1">a<td>
<td class="c1">t<td>
I want to replace the row where id="1" with the results from http.responseText and so I try to do the following:
var curr_row = document.getElementById("1");
curr_row.innerHTML = httpRequest.responseText;
However, this results in:
<table>
<tr id="0">
<td></td>
<td></td>
<td></td>
</tr>
<tr id="1">
<td class="c1">h</td>
<td></td>
<td class="c1">e</td>
<td></td>
<td class="c1">l</td>
<td></td>
</tr>
</table>
The above returns a row with what seems to be the original empty cells along with the new cells I want. Why is this occurring? I want the httpRequest.responseText cells to completely replace the original cells.

It is probably because your responsetext is not having closing tags
Change
<td class="c1">c<td>
<td class="c1">a<td>
<td class="c1">t<td>
To
<td class="c1">c</td>
<td class="c1">a</td>
<td class="c1">t</td>
From where you are getting it in the backend!

Related

Getting the value from a regex element id in jquery datatable

I have a data table that has a structure like:
<tbody>
<tr>
<td>ABC<td>
<td id="invNumbers0">DEF<td>
</tr>
<tbody>
<tr>
<td>GHI<td>
<td id="invNumbers1">JKL<td>
</tr>
<tr>
<td>MNO<td>
<td id="invNumbers2">PQR<td>
</tr>
<tr>
<td>STU<td>
<td id="invNumbers3">WXY<td>
</tr>
I want to find the value of all the elements whose id starts with "invNumbers"
I have tried:
alert($('[id^=invNumbers]').value);
alert($('[id^=invNumbers]').val());
Your table HTML structure is currently not valid as you need to enclosed tbody's within the table and you are missing closing tags of td's as well.
In addition, to get the text whose id starts with "invNumbers" you need to use jQuery .text() function not .val()
Edit: Since you want them separated by space or commas. Ideally in that case you can use .each function to get each of text separately so that you can do whatever you want with each text individually.
Live Working Demo:
$('[id^=invNumbers]').each(function(x, o) {
console.log($(o).text()) //showing each id text seperately
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">DEF</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">JKL</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">PQR</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">WXY</td>
<td></td>
</tr>
</tbody>
</table>

Get text of specific element by index

I want to get the text of the second to last table row, so I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num")[tradeNumEl].text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
However it gives me:
Uncaught TypeError: $(...)[tradeNumEl].text is not a function
How can I fix this? Here's the fiddle: https://jsfiddle.net/45a9sc6k/4/
Accessing a jQuery object by index returns the Element object at that index of the collection. It does not return a jQuery object - hence your error. To fix this, use eq() instead:
console.log($("td.trade-num").eq(tradeNumEl).text());
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
You have to use eq() with index no as parameter. .eq(index) Reduce the set of matched elements to the one at the specified index.
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text() )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
You also can create the object of the found element
///I want to get the text of the second to last table row using js and jquery. So I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($($("td.trade-num")[tradeNumEl]).text(), tradeNumEl)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>

JQuery: Uncaught SyntaxError: Invalid or unexpected token

I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.
Here is my code:
HTML:
<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
JQuery script:
socket.on('resetGranted', function() {
$('table').replaceWith('<table> //says error is here
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>');
})
How do I fix this?
Use backtick ` for multiline string
console.log(`
multi
line
string
here
`);
socket.on('resetGranted', function() {
var htmlContent='<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>';
$('table').replaceWith(htmlContent);
})

Adding specified element from many rows JavaScript/jQuery

I've got table structure like this:
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
(...)
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
</tbody>
I just want to pull every td price value and sum it up. At the end i just need an variable with total value.
Using map() and reducing it to the sum:
var sum = $('td.price').map(function () {
return parseInt(this.innerHTML, 10)
}).get().reduce(function (a, b) {
return a + b;
});
var sum = $('td.price').map(function () {
return parseInt(this.innerHTML, 10);
}).get().reduce(function (a, b) {
return a + b;
});
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price">5</td>
(...)
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">10</td>
(...)
<td></td>
</tr>
(...)
<tr>
<td></td>
<td></td>
<td class="price">20</td>
(...)
<td></td>
</tr>
</tbody>
<table>
Use jQuery each() to iterate over the td elements and make sure you use parseInt to avoid concatenating strings rather than summing
var sum = 0;
$('td.price').each(function(){
sum += parseInt($(this).text());
});
document.write('Sum is ' + sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price">5</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">10</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">20</td>
<td></td>
</tr>
</tbody>
<table>

Generating PDF from complex html table using JSPDF

I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.
You can see in this Fiddle, What i tried so far.
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
Problem is, when i try to generate pdf i am getting
Uncaught TypeError: Cannot read property 'name' of undefined
Is it possible to use JSPDF for this kind of complex table or will it only work for a simple table.
EDIT:
Solved this by different way, This is what i did
I converted HTML Table into Canvas html2canvas.js
You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.
If you need charts and images as part of PDF -> charts and images as part of PDF
Credit goes to my brain.
I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:
while (j < tableRow.cells.length && headers[j] != undefined) {
Which was originally:
while (j < tableRow.cells.length) {
Alternatively, I could make it go away by adding another td to the tr it was processing (it only had one td, which apparently caused the problem).
I'm thinking I'll try to submit it as a bug fix.
Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
Select TABLES in the top menu of the Playground.
Scroll down the example pdf, there is a section illustrating Colspan-capabilities.
I stepped through the code using the chrome debugger, and it looks like jspdf is is having an issue with colspan in the first row of the table.
It seems like a bug in their library, where you can't use col span in the header or first row of each table.
Remove All the colspan Attribute And Rowspan Attribute From td Tag And Apply blank td then try.
Its Working and Generate Pdf (for checking put this code in your file)
<div id="inspectionReport">
<div class="title">
<p class="appname">Title</p>
<p>REPORT</p>
</div>
<p class="date">Revised on 9/3/2013</p>
<p style="float:right;">
<button onclick="javascript:demoFromHTML();">Generate Pdf</button>
</p>
<table style="width:100%">
<tbody>
<tr>
<td>A No : <span id="a">1</span>
</td>
<td>B / No : <span id="b">2</span>
</td>
<td>C Date: <span id="c"></span>
</td>
</tr>
<tr>
<td>A No : <span id="d">3</span>
</td>
<td>B name: <span id="e">4</span>
</td>
<td>
<p>C [ X ] D [ ]</p>
<p>G Date : <span id="f"></span>
</p>
</td>
</tr>
<tr>
<td>O No : <span id="yy"></span>
</td>
<td>Orgin : <span id="yyr"></span>
</td>
<td>S : [ X ] G [ ] J [ X ] Y [ X ] G</td>
</tr>
<tr>
<td></td>
<td>Name : <span id="QW"></span>
</td>
<td>xc : <span id="FG"></span>
</td>
</tr>
<tr>
<td>No : <span id="gg"></span>
</td>
<td>company : <span id="gg"></span>
</td>
<td>type t [ ] A [ X ] No</td>
</tr>
<tr>
<td>Quen : <span id="odrQuan"></span>
</td>
<td>Sh : <span id="shipQuan"></span>
</td>
<td>Run [ ] Int [ X ]. Shi [ ] No.</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Title:</td>
</tr>
<tr align="center">
<td>FY</td>
<td>CJK</td>
<td>SL</td>
<td>F</td>
<td>P</td>
</tr>
<tr align="center">
<td><span id="fyavail">20</span>
</td>
<td><span id="ck">40</span>
</td>
<td><span id="sl">70</span>
</td>
<td><span id="finish">100</span>
</td>
<td><span id="pack">50</span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody id="dhtml">
<tr>
<td class="boldFont">SAPC:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>ATU: <span id="aqluser"></span>
</td>
<td>SS : <span id="sampleSize"></span>
</td>
<td></td>
<td >MA : <span id="majallowed"></span>
</td>
<td></td>
<td>MAS : <span id="minallowed"></span>
</td>
</tr>
<tr>
<td>DT</td>
<td align="center">No.</td>
<td>DD</td>
<td align="center">C</td>
<td align="center">Max</td>
<td align="center">Min</td>
</tr>
<tr>
<td >FY</td>
<td align="center">1</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">22</td>
<td align="center">24</td>
<td align="center">246</td>
</tr>
<tr>
<td >SKL</td>
<td align="center">1</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
</tr>
<tr>
<td align="center">2</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
<td></td>
</tr>
<tr>
<td align="right">ST :</td>
<td></td>
<td></td>
<td align="center">28</td>
<td align="center">26</td>
<td align="center">468</td>
</tr>
<tr>
<td >A</td>
<td align="center">1</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">66</td>
<td align="center">890</td>
<td align="center">66</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right" class="boldFont">Tot :</td>
<td align="center">116</td>
<td align="center">940</td>
<td align="center">780</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tr class="boldFont">
<td >Title 3</td>
<td align="center">ASD</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>C : <span id="tolcartons"></span>
</td>
<td>S : <span id="samsize"></span>
</td>
<td>M : <span id="allowmajor"></span>
</td>
<td align="center">WPZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>D No.</td>
<td>D type</td>
<td>NOF</td>
<td>C</td>
<td>Spev</td>
<td>Act</td>
<td>diff</td>
</tr>
<tr>
<td>1</td>
<td>F/Y</td>
<td><span id="nooffy"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>S/K/L</td>
<td><span id="skl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Fin</td>
<td><span id="finl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">TM:</td>
<td><span id="totmajores"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Comment:<span id="comment"></span>
</td>
</tr>
</table>
<table style="width:100%">
<tbody>
<tr>
<td >outcome</td>
<td>A. V</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>B. M</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>C. P</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td>CC A s</td>
</tr>
<tr>
<td><span id="comcorraction"></span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Title 4 :</td>
<td></td>
</tr>
<tr>
<td>TWT [ X ] Pass [ ] Fail</td>
<td>STO [ ] Pass [ X ] Fail</td>
</tr>
<tr>
<td>PAS [ ] A [ X ] NA</td>
<td>SR [ ] Yes [ X ] No [ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Signatures:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p><span id="qaauditNo">.</span> <span id="qaadate" class="sdate">.</span>
</p>
<p>QANo <span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="mp">.</span> <span id="mpdate" class="sdate">.</span>
</p>
<p>MP<span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="supr">.</span> <span id="supdate" class="sdate">.</span>
</p>
<p>Sup<span class="sdate">Date</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="boldFont">Note: ABCDEFG</p>
<p class="boldFont">Note: ABCDEFG</p>
<div class="title boldFont">QC / MED / FAC / FOR</div>

Categories