I have two scripts, one successfully exports to xlsx with color and style for the rows and columns with both class and in line css. I have a more sophisticated script that exports multiple sheets, that I want to apply style to. This second one is not working though. I have a feeling the issue lies in the javascript, particularly the template portions, I cant see what would be the difference otherwise. Here is the one that works:
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
var tableToExcel = (function () {
// Define your style class template.
var style = "<style>.green { background-color: green; }</style>";
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' + style + '</head><body><table>{table}</table></body></html>'
, base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
, format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
}
return function (table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
<style type="text/css">
.green
{
background-color: green;
}
</style>
<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table', 'testTable2', 'This is a test')" value="Export to Excel" />
<table id="testTable" summary="Code page support in different versions of MS Windows."
rules="groups" frame="hsides" border="2">
<caption>
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
</caption>
<colgroup align="center"></colgroup>
<colgroup align="left"></colgroup>
<colgroup span="2" align="center"></colgroup>
<colgroup span="3" align="center"></colgroup>
<thead valign="top">
<tr>
<th>Code-Page<br />ID</th>
<th>Name</th>
<th>ACP</th>
<th>OEMCP</th>
<th>Windows<br />NT 3.1</th>
<th>Windows<br />NT 3.51</th>
<th>Windows<br />95</th>
</tr>
</thead>
<tbody>
<tr>
<td>1200</td>
<td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
<td>*</td>
</tr>
Here is the script for the one that doesnt, no errors, just wont publish the styles on the same html elements:
Head:
<script>
var tablesToExcel = (function() {
var style = "<style>.green { background-color: green; }</style>";
var uri = 'data:application/vnd.ms-excel;base64,'
, tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
+ '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Seecuring</Author><Created>{created}</Created></DocumentProperties>'
+ '<Styles>'
+ '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
+ '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
+ '</Styles>'
+ '{worksheets}</Workbook>'
, tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
, tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(tables, wsnames, wbname, appname) {
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
for (var i = 0; i < tables.length; i++) {
if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
for (var j = 0; j < tables[i].rows.length; j++) {
rowsXML += '<Row>'
for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
ctx = { attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
, nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
, data: (dataFormula)?'':dataValue
, attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
};
rowsXML += format(tmplCellXML, ctx);
}
rowsXML += '</Row>'
}
ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
}
ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
workbookXML = format(tmplWorkbookXML, ctx);
console.log(workbookXML);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = wbname || 'Oracle Cloud Snapshot Management.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
})();
</script>
<style type="text/css">
.green
{
background-color: #0F51F6;
}
</style>
</head>
The html:
<table id="intro" class="table2excel" rules="groups" frame="hsides" border="2">
<tr>
<td><!--<img src='<?php //echo $environment; ?>/access/images/erpra.png' width='100px' height='100px'> --></td>
</tr>
<tr>
<td class="green">KPMG - Oracle Cloud ERP/HCM Configuration Management Assessment
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="background-color: #00f; color: #fff">A review of key Configuration elements within the Oracle Cloud Applications/Fusion suite. <?php if(!isset($_POST['no_date'])&& $_POST['no_date']== "Y"){
$CREATION_DATE_POST_DISPLAY_RAW = $_POST['creation_from'];
$CREATION_DATE_DISPLAY=date("m/d/Y",strtotime($CREATION_DATE_POST_DISPLAY_RAW));
$LAST_UPDATE_DATE_POST_DISPLAY_RAW = $_POST['update_from'];
$LAST_UPDATE_DATE_DISPLAY=date("m/d/Y",strtotime($LAST_UPDATE_DATE_POST_DISPLAY_RAW));
echo "Creation Date from : $CREATION_DATE_DISPLAY, Last Updated Date from: $LAST_UPDATE_DATE_DISPLAY";
}
?></td>
Thanks for reading!
<div>
<style>
#media all {
.page-break {
display: none;
}
}
#media print {
.page-break {
display: block;
page-break-inside: auto;
}
}
</style>
</div>
Related
javascript beginner here, trying to code and learn.
I have a table filled with data (fetch from url) and that data is
{
"france": "paris",
"finland": "helsinki",
"sweden": "stockholm",
"tajikistan": "dushanbe",
"uzbekistan ": "toshkent",
"china": "peking",
"dole": {
"Key": "fhd699f"
}
}
and under the table I have a select box (the data of it also fetched from url) its data is this
[
{"nimi": "tili","id": "48385","somewhere": "nassau","somewhere2": "bamako","somewhere3": "rabat","somewhere4": "baku"},
{"nimi": "tili","id": "789642","somewhere": "windhoek","somewhere2": "podgorica","somewhere3": "niamey","somewhere4": "islamabad"}
]
i want to replace the table data with the selected data ( i mean everything) even table's <th> also, for example table's <th> is 'france' and value is 'paris' but after replace table's <th> should be 'nimi' and value 'tili' according to select box data.
here is my code (as you can see 'tajikistan','uzbekistan','china' for some reason not going to their places in table):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container">
<table class="table ">
<thead>
<tr>
<th class="table-success">france</th>
<th class="table-success">finland</th>
<th class="table-success">sweden</th>
</tr>
</thead>
<tbody id="tiedot">
</tbody>
<thead>
<tr>
<th class="table-success">tajikistan</th>
<th class="table-success">uzbekistan</th>
<th class="table-success">china</th>
</tr>
</thead>
<tbody id="tiedot2">
</tbody>
</table>
<select id="valittu" name="name"></select>
</div>
<script>
fetch(
"https://tdejdjd***",
{
method: "GET",
headers: {
"x-api-key": "i****y"
}
}
)
.then((res) => {
res
.json()
.then((data) => {
tableupdating(data, ['france','finland','sweden','tajikistan','uzbekistan','china']);
})
.catch((err) => {
console.log("ERROR: " + err);
});
});
function tableupdating(data, values) {
const totable = document.getElementById("tiedot");
const totable2 = document.getElementById("tiedot2");
totable.innerHTML = "";
totable2.innerHTML = "";
var komb = "";
var komb2 = "";
komb += "<tr>";
komb2 += "<tr>";
values.forEach(value => {
komb += "<td>" + data[value] + "</td>";
})
values.forEach(value => {
komb2 += "<td>" + data[value] + "</td>";
})
totable.insertAdjacentHTML("beforeend", komb);
totable2.insertAdjacentHTML("beforeend", komb2);
}
let dataArray;
fetch(
"https://tdejdjd***",
{
method: "GET",
headers: {
"x-api-key": "i****y"
}
}
)
.then((res) => {
res.json().then((data) => {
dataArray = data;
updateSelect(data, ['nimi','id']);
});
});
function updateSelect(data, values) {
for (var i = 0; i < data.length; i++) {
var Valittu = document.getElementById("valittu");
var option = document.createElement("option");
values.forEach(value => {
option.textContent += data[i][value] + ' '
})
Valittu.appendChild(option);
}
}
document.getElementById("valittu").addEventListener("change", function (event) {
const chosenID = event.target.value.split(" ")[1];
const chosenData = dataArray.filter((data) => data.id === chosenID)[0];
tableupdating(chosenData, ['nimi', 'id', 'somewhere','somewhere2','somewhere3','somewhere4']);
});
</script>
</body>
</html>
as spoken in chat, here is new code, it is working but for some reason these three are in same line and not on their places : komb += "<td>"+tiedot.tajikistan+"</td>";
komb += "<td>"+tiedot.uzbekistan+"</td>";
komb += "<td>"+tiedot.china+"</td></tr>";
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<style>
</style>
</head>
<body onload="fillTheBox();">
<div class="container">
<table class="table" id="myTable">
<thead>
<tr>
<th class="table-success">france</th>
<th class="table-success">finland</th>
<th class="table-success">sweden</th>
</tr>
</thead>
<tbody id="tiedot">
</tbody>
<thead>
<tr>
<th class="table-success">tajikistan</th>
<th class="table-success">uzbekistan</th>
<th class="table-success">china</th>
</tr>
</thead>
</table>
<select id="valittu" name="name" onchange="changed()"></select>
</div>
<script>
fetch("https://qj",
{
method: "GET",
headers: {
"x-api-key": ""
}
}
).then(res =>{
res.json().then(tiedot => {
console.log(tiedot);
var komb ="";
komb +="<tr>";
komb += "<td>"+tiedot.france+"</td>";
komb += "<td>"+tiedot.finland+"</td>";
komb += "<td>"+tiedot.sweden+"</td>";
komb += "<td>"+tiedot.tajikistan+"</td>";
komb += "<td>"+tiedot.uzbekistan+"</td>";
komb += "<td>"+tiedot.china+"</td></tr>";
document.getElementById("tiedot").insertAdjacentHTML("beforeend", komb );
}
)
})
var dataArray = [
{ "nimi": "tili", "id": "48385", "somewhere": "nassau", "somewhere2": "bamako", "somewhere3": "rabat", "somewhere4": "baku" },
{ "nimi": "tili", "id": "789642", "somewhere": "windhoek", "somewhere2": "podgorica", "somewhere3": "niamey", "somewhere4": "islamabad" }
]
function fillTheBox() {
var selectBox = document.getElementById("valittu");
var option = document.createElement("option");
option.value = dataArray[0];
option.text = dataArray[0].nimi+' '+dataArray[0].id;
selectBox.add(option);
var option1 = document.createElement("option");
option1.value = dataArray[1];
option1.text = dataArray[1].id;
selectBox.add(option1);
}
function changed() {
var e = document.getElementById("valittu");
var selectedObjectID = e.options[e.selectedIndex].text;
chosenData = dataArray.filter((data) => data.id === selectedObjectID)[0];
var myTable = document.getElementById("myTable");
myTable.innerHTML = "";
generateTable(myTable, chosenData);
}
function generateTable(table, data) {
let row1 = table.insertRow();
row1.className = "table-success";
let row2 = table.insertRow();
let row3 = table.insertRow();
row3.className = "table-success";
let row4 = table.insertRow();
var counter = 1;
for (key in data) {
if (counter<=3) {
let cell = row1.insertCell();
let text = document.createTextNode(key);
cell.appendChild(text);
let cell2 = row2.insertCell();
let text2 = document.createTextNode(data[key]);
cell2.appendChild(text2);
} else {
let cell = row3.insertCell();
let text = document.createTextNode(key);
cell.appendChild(text);
let cell2 = row4.insertCell();
let text2 = document.createTextNode(data[key]);
cell2.appendChild(text2);
}
counter++;
}
}
</script>
</body>
</html>
I created a basic demo to show the logic. Firs of all give an id to your table. And create a onChange event for your select box. In your event function edit your table content with innerHTML property. Just focus on change() and generateTable() functions in my code
<body onload="fillTheBox();">
<div class="container">
<table class="table" id="myTable">
<thead>
<tr>
<th class="table-success">france</th>
<th class="table-success">finland</th>
<th class="table-success">sweden</th>
</tr>
</thead>
<tbody id="tiedot">
</tbody>
<thead>
<tr>
<th class="table-success">tajikistan</th>
<th class="table-success">uzbekistan</th>
<th class="table-success">china</th>
</tr>
</thead>
</table>
<select id="valittu" name="name" onchange="changed()"></select>
</div>
<script>
var dataArray = [
{ "nimi": "tili", "id": "48385", "somewhere": "nassau", "somewhere2": "bamako", "somewhere3": "rabat", "somewhere4": "baku" },
{ "nimi": "tili", "id": "789642", "somewhere": "windhoek", "somewhere2": "podgorica", "somewhere3": "niamey", "somewhere4": "islamabad" }
]
function fillTheBox() {
var selectBox = document.getElementById("valittu");
var option = document.createElement("option");
option.value = dataArray[0];
option.text = dataArray[0].id;
selectBox.add(option);
var option1 = document.createElement("option");
option1.value = dataArray[1];
option1.text = dataArray[1].id;
selectBox.add(option1);
}
function changed() {
var e = document.getElementById("valittu");
var selectedObjectID = e.options[e.selectedIndex].text;
chosenData = dataArray.filter((data) => data.id === selectedObjectID)[0];
var myTable = document.getElementById("myTable");
myTable.innerHTML = "";
generateTable(myTable, chosenData);
}
function generateTable(table, data) {
let row1 = table.insertRow();
row1.className = "table-success";
let row2 = table.insertRow();
row2.className = "table-success";
let row3 = table.insertRow();
row3.className = "table-success";
let row4 = table.insertRow();
row4.className = "table-success";
var counter = 1;
for (key in data) {
if (counter<=3) {
let cell = row1.insertCell();
let text = document.createTextNode(key);
cell.appendChild(text);
let cell2 = row2.insertCell();
let text2 = document.createTextNode(data[key]);
cell2.appendChild(text2);
} else {
let cell = row3.insertCell();
let text = document.createTextNode(key);
cell.appendChild(text);
let cell2 = row4.insertCell();
let text2 = document.createTextNode(data[key]);
cell2.appendChild(text2);
}
counter++;
}
}
</script>
</body>
</html>
UPDATE:
To separate the fields mentioned in question add a <tr> element between them.
komb +="<tr>";
komb += "<td>"+tiedot.france+"</td>";
komb += "<td>"+tiedot.finland+"</td>";
komb += "<td>"+tiedot.sweden+"</td>";
komb +="</tr><tr>";
komb += "<td>"+tiedot.tajikistan+"</td>";
komb += "<td>"+tiedot.uzbekistan+"</td>";
komb += "<td>"+tiedot.china+"</td></tr>";
I'm trying to copy a HTML table to a Word file.
In the first all the first column copied just fine to the word table.
When the code starts to copy the second column it is overwrite the first one.
I change the index of the column --> Cell(i,0)/Cell(i,1).
Any idea why it happen?
<script>
function tab()
{
var NUMBER_OF_ROWS = 22;
var NUMBER_OF_COLUMNS = 2;
var objWord = new ActiveXObject("Word.Application");
objWord.Visible = True
Set objDoc = objWord.Documents.Add();
var objRange = objDoc.Range();
objDoc.Tables.Add (objRange, NUMBER_OF_ROWS, NUMBER_OF_COLUMNS);
var objTable = objDoc.Tables(1);
var thisTable = $(' .ms-table');
for (var i=0;i<thisTable.rows.length;i++)
{
var oCell = thisTable.rows.item(i).cells;
objTable.Cell(i,0).Range.Text = oCell.item(0).innerText;
}
for (var i=0;i<thisTable.rows.length;i++)
{
var oCell = thisTable.rows.item(i).cells;
objTable.Cell(i,1).Range.Text = oCell.item(1).innerText;
}
objTable.AutoFormat(9)
}
</script>
Please see if the below JavaScript code is helpful:
JavaScript :
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
(function($) {
$.fn.wordExport = function(fileName) {
fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
var static = {
mhtml: {
top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
body: "<body>_body_</body>"
}
};
var options = {
maxWidth: 624
};
// Clone selected element before manipulating it
var markup = $(this).clone();
// Remove hidden elements from the output
markup.each(function() {
var self = $(this);
if (self.is(':hidden'))
self.remove();
});
// Embed all images using Data URLs
var images = Array();
var img = markup.find('img');
for (var i = 0; i < img.length; i++) {
// Calculate dimensions of output image
var w = Math.min(img[i].width, options.maxWidth);
var h = img[i].height * (w / img[i].width);
// Create canvas for converting image to data URL
var canvas = document.createElement("CANVAS");
canvas.width = w;
canvas.height = h;
// Draw image to canvas
var context = canvas.getContext('2d');
context.drawImage(img[i], 0, 0, w, h);
// Get data URL encoding of image
var uri = canvas.toDataURL("image/png");
$(img[i]).attr("src", img[i].src);
img[i].width = w;
img[i].height = h;
// Save encoded image to array
images[i] = {
type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
location: $(img[i]).attr("src"),
data: uri.substring(uri.indexOf(",") + 1)
};
}
// Prepare bottom of mhtml file with image data
var mhtmlBottom = "\n";
for (var i = 0; i < images.length; i++) {
mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
mhtmlBottom += "Content-Location: " + images[i].location + "\n";
mhtmlBottom += "Content-Type: " + images[i].type + "\n";
mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
mhtmlBottom += images[i].data + "\n\n";
}
mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";
//TODO: load css from included stylesheet
var styles = "";
// Aggregate parts of the file together
var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;
// Create a Blob with the file contents
var blob = new Blob([fileContent], {
type: "application/msword;charset=utf-8"
});
saveAs(blob, fileName + ".doc");
};
})(jQuery);
} else {
if (typeof jQuery === "undefined") {
console.error("jQuery Word Export: missing dependency (jQuery)");
}
if (typeof saveAs === "undefined") {
console.error("jQuery Word Export: missing dependency (FileSaver.js)");
}
}
$("a.jquery-word-export").click(function(event) {
$("#page-content").wordExport();
});
Html:
<table class="ms-table">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<button>tab</button>
<div class="col-xs-5">
<a class="btn jquery-word-export" href="javascript:void(0)">
<span class="word-icon">W</span>
Export as .doc
</a>
</div>
Supporting Js files:
https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
I have some code written in javascript n when I am trying to convert in jQuery I am getting error.
var holder = document.getElementById('filedetails')
, rows = holder.getElementsByTagName('tr')
setSuccess = function(filename) {
if (holder != null) {
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (cells[0].innerText == filename && cells[3].innerText != "error!") {
cells[3].innerHTML = "<a href='#' class='file-delete ss-delete no-click'></a>";
}
}
}
}
I tried
var holder = $('#filedetails"),
rows = $('#filedetails tr")
I am not sure what to do with innertext and innerhtml.
<div data-behavior="delete-process" id="holder">
<table>
<thead>
<tr>
<th class="medium-5">Name</th>
<th class="medium-3">Size</th>
<th class="medium-3">Type</th>
<th class="medium-1"></th>
</tr>
</thead>
<tbody id="filedetails">
<tr data-filesize="1.4" data-filename="Sample Image.jpg">
<td><strong>Sample_Image</strong></td>
<td class="nodesize">1.4 MB</td>
<td>JPG</td>
<td class="file-loading"></td></tr>
</tbody>
</table>
<div class="margin bottom large text-center drag-desc">drag and drop files here.</div>
</div>
Here is a "jqueryized" version of your code
var holder = $('#filedetails'),
rows = holder.find('tr');
var setSuccess = function(filename) {
rows.each(function() {
var cells = $(this).find('td');
if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'></a>");
}
});
};
setSuccess("Sample_Image");
Alternate that just uses the rows:
var rows = $('#filedetails').find('tr');
var setSuccess = function(filename,useme) {
useme.each(function() {
var cells = $(this).find('td');
if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'>freebeer</a>");
}
});
};
setSuccess("Sample_Image", rows);
To NOT use a positional table element, use a class and filter by that within the TD cells as here: This assumes one use of a class per row.
var rows = $('#filedetails').find('tr');
var setSuccess = function(filename, useme) {
useme.each(function() {
var cells = $(this).find('td');
if (cells.filter('.file-name').text() == filename
&& cells.filter('.file-loading').text() != "error!") {
cells.filter('.file-loading')
.html("<a href='#' class='file-delete ss-delete no-click'>noclick</a>");
}
});
};
setSuccess("Sample_Image", rows);
Fiddl https://jsfiddle.net/MarkSchultheiss/0fx2jms7/2/
Check the following code snippet
$(document).ready(function(){
var holder = $("#filedetails")
, rows = holder.find('tr');
var rowsLength=rows.Length;
var setSuccess = function(filename) {
if (holder != null) {
var j=rows.length;
for (var i=0; i < j; ++i) {
var cells = $(rows[i]).find('td');
var filename=$('.filename');
var file=$('.file');
if (filename.text() == filename && file.text() != "error!")
{
var aElement=$("<a/>");
aElement.href="#";
aElement.class="file-delete ss-delete no-click";
file.html(aElement);
}
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-behavior="delete-process" id="holder">
<table>
<thead>
<tr>
<th class="medium-5">Name</th>
<th class="medium-3">Size</th>
<th class="medium-3">Type</th>
<th class="medium-1"></th>
</tr>
</thead>
<tbody id="filedetails">
<tr data-filesize="1.4" data-filename="Sample Image.jpg">
<td class="filename"><strong>Sample_Image</strong></td>
<td class="nodesize">1.4 MB</td>
<td>JPG</td>
<td class="file-loading file"></td></tr>
</tbody>
</table>
<div class="margin bottom large text-center drag-desc">drag and drop files here.</div>
</div>
Hope this helps
How can the code be modified below, so as to return the name of the column header when the column header box is clicked by the user. Ie. if I click on the "File Number" box, a javascript alert box will alert me as to what the name of the column header (th) is "File Number" ect.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable {
border: 1px solid black
}
#mstrTable td, th {
border: 1px solid black
}
#mstrTable tr.normal td {
color: black;
background-color: white;
}
#mstrTable tr.highlighted td {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<table id="mstrTable">
<thead>
<tr>
<th>File Number</th>
<th>Date1</th>
<th>Date2</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Approved</td>
<td>1 </td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
(
function( )
{
var trows = document.getElementById("mstrTable").rows;
for ( var t = 1; t < trows.length; ++t )
{
trow = trows[t];
trow.className = "normal";
trow.onclick = highlightRow;
}
function highlightRow(e)
{
alert('Row is ' + (this.rowIndex-1))
for ( var t = 1; t < trows.length; ++t )
{
trow = trows[t];
trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
}
}
}
)();
</script>
</body>
</html>
What is with all the looping! There is no need for the loops, use your event object which tells you what was clicked on!
//assumes one thead and one tbody
var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement; //assumes there are no other elements inside the td
var row = td.parentNode;
row.className = row.className==="highlighted" ? "" : "highlighted";
}
thead.onclick = function (e) {
e = e || window.event;
var th = e.target || e.srcElement; //assumes there are no other elements in the th
alert(th.innerHTML);
}
The above could be one click event for the whole table, I did not want to check for the element type that was clicked on.
JSFiddle
This should do it: jsFiddle example.
(
function () {
var trows = document.getElementById("mstrTable").rows;
for (var t = 1; t < trows.length; ++t) {
trow = trows[t];
trow.className = "normal";
trow.onclick = highlightRow;
}
var theads = document.getElementsByTagName("th");
for (var t = 0; t < theads.length; t++) {
thead = theads[t];
thead.onclick = highlightHead;
}
function highlightRow(e) {
alert('Row is ' + (this.rowIndex - 1))
for (var t = 1; t < trows.length; ++t) {
trow = trows[t];
trow.className = (trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
}
}
function highlightHead(e) {
alert('Head is ' + this.innerHTML.toString());
}
})();
Have made a table and stored it in a variale getcontent by using basic HTML.
getcontent="<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>[Assignment name]</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
Contentinsquare is an array containg string which can be filled in th table. (SQUARE BRACKETS] in getcontent
contentinsquare=["name","100$"]
i want the value of contentinsqaure to be placed in between the sqaure brackets.For that i have used the code :-
var contentinsquare=["name","100$"]
var strInputCode = contentinsquare[1].replace(/&(lt|gt);/g, function (strMatch, p1){
return (p1 == "lt")? "<" : ">";
});
var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
contentinsquare[1]=strTagStrippedText
var strforlabelname = []
var strfortextarea = []
var strfortext = []
var str = []
label = dojo.query('label');
console.log(label, "all label names")
for( i = 0; i < label.length; i++)
{
if(label[i].id != "")
{
inner = dojo.byId(label[i].id).innerHTML
var name = inner.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
strforlabelname.push(name)
}
}
console.log(strforlabelname, "string")
text = dojo.query('input')
for( i = 0; i < text.length; i++)
{
if(text[i].id == "")
{
}
else
{
innertext = dijit.byId(text[i].id).getValue();
str.push(innertext)
//console.log(str,"strng1")
}
}
textarea = dojo.query('textarea')
for( i = 0; i < textarea.length; i++)
{
if(textarea[i].id == ""||textarea[i].id =="textareaidfirst")
{
}
else
{
innertextarea = dojo.byId(textarea[i].id).value
str.push(innertextarea)
}
}
for( i = 0; i < strforlabelname.length; i++)
{
for( j = 0; j < contentinsquare.length; j++)
{
if(contentinsquare[j] == strforlabelname[i])
{
var patt = new RegExp("\\[" + strforlabelname[i] + "\\]", "g")
getcontent = getcontent.replace(patt, str[i]);
}
}
}
This results to :-
Result :-
"<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>name</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
that is the sqaure brackets contaning <span> tag is not working. i want the 100 $ to be replaced over thr.