如何更改日期输入的 innerHTML 以使该值与当前用户输入的值匹配？

Question

I am currently working on exporting a table by grabbing the innerHTML of each row of the table. I have date inputs that user can change and some are auto-generated. Regardless, this obviously does not change the innerHTML and therefore when I grab the html to export the table, the current values are not reflected. I want to change the innerHTML of these elements so the value as described in the HTML is consistent with what is currently on the page.

Example of an element in the table whose innerHTML I want updated:

<td style="padding-left:1.5em !important;">
<div class="input-group date">
<input Name="exampleinput" class="form-control" id="exampleid" readonly="true" type="date" value="" />
</div>
</td>

I want to have the value of this updated when I go to export the table.

 $('table td:has(input[type!="hidden"])').each(function () {
 // ???????

Reproduce table:

 function fnExcelReport() { var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j = 0; tab = document.getElementById('thetable'); // id of table $('table td:has(input[type!="hidden"])').each(function() { //$(this).html($('input[type!="hidden"]', this).val()); //currently just replaces entire html with just text }); for (j = 0; j < tab.rows.length; j++) { var testing = tab.rows[j].innerHTML; tab_text = tab_text + tab.rows[j].innerHTML + "</tr>"; tab_text = tab_text + "</tr>"; } tab_text = tab_text + "</table>"; var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\\:11\\./)) // If Internet Explorer { txtArea1.document.open("txt/html", "replace"); txtArea1.document.write(tab_text); txtArea1.document.close(); txtArea1.focus(); sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls"); } else //other browser not tested on IE 11 sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text)); return (sa); }

 <table id="thetable" class="col-sm-offset-1" style="border: 1px solid #000 !important;"> <thead> <tr> <th scope="col" class="col-sm-1 text-center" style="border: 1px solid #000 !important;">Stage Code</th> <th scope="col" class="col-sm-4 text-center" style="border: 1px solid #000 !important;">Stage</th> <th scope="col" class="col-sm-3 text-right" style="border-left: 1px solid #000 !important;border-bottom: 1px solid #000 !important;min-width:160px;">header</th> <th scope="col" class="col-sm-2" style="border-bottom: 1px solid #000 !important;">header</th> </tr> </thead> <tbody> <tr style="height:1em;"> <td style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;"></td> <td style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;"></td> <td></td> <td></td> </tr> <tr> <td class="text-center" style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;">10.99</td> <td class="text-left" style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;padding-left:1.5em !important;">Row title</td> <td style="padding-left:1.5em !important;"> <div class="input-group date"> <input Name="inputname" class="form-control" id="inputid" readonly="true" type="date" value="" /> </div> </td> </tbody> </table>

EDIT: Added (what I hope is) a minimal, reproducible example.

EDIT 2: Answer below is correct. I accomplished it via this:

$('table input[type="date"]').each(function () {
var newvalue = $(this).val();
$(this).attr("value", newvalue);


});

(I'll note that for some reason even though I see the innerHTML being grabbed now has the value fields correct, it isn't showing in my exported Excel document, so I'll have to play around with that a bit.)

Answer 1

You need to set the defaultValue property.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement :

defaultValue | string: Returns / Sets the default value as originally specified in the HTML that created this object.