Применение 1 синтаксиса JavaScript для нескольких кнопок

Question

У меня есть код Javascript для экспорта таблицы в формат Excel. Он отлично работает с 1 столом вместе с 1 кнопкой.

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

Но когда у меня есть более чем один таблицы, кажется, что Javascript не работает! Во-первых, идентификатор меняется на класс, как показано ниже.

Пожалуйста, помогите! Благодаря

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 является зарезервированным словом в JavaScript. Измените имя переменной на что-то действительное и выбрать несколько элементов, разделяя их запятой:

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

Вот одно решение, чтобы получить эту работу так, как вы ожидаете:

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

первый: удалить var class и попробовать может быть с selection или что-то, потому что class уже зарезервированное слово, то сделать:

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

, если вам нужно что-то другое, дайте мне знать.