Applying 1 JavaScript syntax for Multiple Buttons

Question

I have a Javascript code to export a table to Excel format. It works fine with 1 table along with 1 button.

JS

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
function TableToExcel()
{
    var id = $('#dvData');
    var strCopy = $('<div></div>').html(id.clone()).html(); window.clipboardData.setData("Text", strCopy);
    var objExcel = new ActiveXObject("Excel.Application");
    objExcel.visible = false; var objWorkbook = objExcel.Workbooks.Add; var objWorksheet = objWorkbook.Worksheets(1); objWorksheet.Paste; objExcel.visible = true;
}
</script>

HTML

<table  id="dvData">
                    <tr>
                        <th>Billing System</th>
                        <th>Market Code</th>
                        <th>Payment Amount</th>
                    </tr>
                    <tr>
                        <td>RED</td>
                        <td>222</td>
                        <td>$103.00</td>
                    </tr>
                    <tr>
                        <td>BLUE</td>
                        <td>111</td>
                        <td>$13.00</td>
                    </tr>
                    <tr>
                        <td>GREEN</td>
                        <td>555</td>
                        <td>$143.00</td>  
                    </tr>
                </table>
<br />
<input type="button" id="btnExport" value="Export" onclick="TableToExcel();" />

But when I have more than one tables, it seems like the Javascript doesn't work! First, ID is changed to class like the below code.

Please help! Thanks

JS

<script type="text/javascript" language="javascript">
function TableToExcel()
{
    var class = $('.dvData .dvData1');
    var strCopy = $('<div></div>').html(class.clone()).html(); window.clipboardData.setData("Text", strCopy);
    var objExcel = new ActiveXObject("Excel.Application");
    objExcel.visible = false; var objWorkbook = objExcel.Workbooks.Add; var objWorksheet = objWorkbook.Worksheets(1); objWorksheet.Paste; objExcel.visible = true;
}
</script>

HTML

<table  class="dvData">
    <tr>
        <th>Account System</th>
        <th>Market Code</th>
        <th>Payment Amount</th>
    </tr>
    <tr>
        <td>RED</td>
        <td>222</td>
        <td>$103.00</td>
    </tr>
    <tr>
        <td>BLUE</td>
        <td>111</td>
        <td>$13.00</td>
    </tr>
    <tr>
        <td>GREEN</td>
        <td>555</td>
        <td>$143.00</td>  
    </tr>
</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="TableToExcel();" /> 

<table  class="dvData1">
 <tr>
    <th>Billing System</th>
    <th>Market Code</th>
    <th>Payment Amount</th>
</tr>
<tr>
    <td>RED</td>
    <td>222</td>
    <td>$103.00</td>
</tr>
<tr>
    <td>BLUE</td>
    <td>111</td>
    <td>$13.00</td>
</tr>
<tr>
    <td>GREEN</td>
    <td>555</td>
    <td>$143.00</td>  
</tr>
</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="TableToExcel();" />

Use `var class = $('.dvData, .dvData1');`, to target both. Missing the comma will result in the script looking for a `.dvData1` element nested in a `.dvData`. — blex, Feb 04 '15 at 21:57

Jonathan Crowe · Accepted Answer · 2015-02-05T17:54:21.127

class is a reserved word in javascript. Change the variable name to something valid and select multiple elements by separating them with a comma:

var $class = $('.dvData, .dvData1');

Here is one solution to get this working the way you expect:

HTML:

<table  class="dvData">
    <tr>
        <th>Account System</th>
        <th>Market Code</th>
        <th>Payment Amount</th>
    </tr>
    <tr>
        <td>RED</td>
        <td>222</td>
        <td>$103.00</td>
    </tr>
    <tr>
        <td>BLUE</td>
        <td>111</td>
        <td>$13.00</td>
    </tr>
    <tr>
        <td>GREEN</td>
        <td>555</td>
        <td>$143.00</td>  
    </tr>
</table>
<br />
<input type="button" class="toExcelButton" data-target="dvData" id="btnExport" value="Export" onclick="TableToExcel();" /> 

<table  class="dvData1">
 <tr>
    <th>Billing System</th>
    <th>Market Code</th>
    <th>Payment Amount</th>
</tr>
<tr>
    <td>RED</td>
    <td>222</td>
    <td>$103.00</td>
</tr>
<tr>
    <td>BLUE</td>
    <td>111</td>
    <td>$13.00</td>
</tr>
<tr>
    <td>GREEN</td>
    <td>555</td>
    <td>$143.00</td>  
</tr>
</table>
<br />
<input type="button" class="toExcelButton" data-target="dvData1" id="btnExport" value="Export" onclick="TableToExcel();" />

JAVASCRIPT:

$(document).ready(function() {

    $(".toExcelButton").click(function() {
        var table = $("." + $(this).data('target'));
        var strCopy = $('<div></div>').html(table.clone()).html(); window.clipboardData.setData("Text", strCopy);
        var objExcel = new ActiveXObject("Excel.Application");
        objExcel.visible = false; 
         var objWorkbook = objExcel.Workbooks.Add; 
        var objWorksheet = objWorkbook.Worksheets(1); 
        objWorksheet.Paste; 
        objExcel.visible = true;
    });

});

Thank you, Jonathan Crowe, NietzscheProgrammer and Blex very much! It works now. When I click on the first button, it generates the first table, but when I click on second button, it generates the first table, also. It sounds like it looks for the first class, only. Any idea? — abcid d, Feb 05 '15 at 14:31
Updated the code. This is one solution that should work for your needs. The important bit is being able to tie the button click to a particular table which is being done in this case through the `data-target` attribute on the button — Jonathan Crowe, Feb 05 '15 at 17:55
Thank you very much, Jonathan Crowe! Yes, `data-target` is a main key to solve this issue. It works as expected! — abcid d, Feb 05 '15 at 18:25
Hi Jonathan, the same page, I got into another issue, can you please take a look at [here](http://stackoverflow.com/questions/28352658/jquery-export-to-excel-ie-issue). Thanks — abcid d, Feb 05 '15 at 20:13

score 0 · Answer 2 · answered Feb 04 '15 at 22:09

0

first: remove your var class and try maybe with selection or something because class is already a reserved word, then do:

var selection = $('.dvData, .dvData1');

if you need something else let me know.

answered Feb 04 '15 at 22:09

Non

8,409
20
71
123

Why post the exact same answer as the one @JonathanCrowe posted 11 minutes ago? – blex Feb 04 '15 at 22:11

Applying 1 JavaScript syntax for Multiple Buttons

2 Answers2