为多个按钮应用1 JavaScript语法

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();" />

Answer 1

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;
    });

});

Answer 2

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.