我的导出的Excel文件中出现错误
我有一个文本和一些单选button的HTML表格。 当您单击“导出到Excel”button时，它将导出HTML表格的值以及表格中选定的任何单选button的值。
但是，如果任何单选button已被选中，并且点击“导出到Excel”button，它将两个单元格合并在一起以包含表格文本，如果没有select任何单选button，则不这样做。
从图像中可以看到，所有不包含任何单选button的表格单元格将两个单元格合并在一起，如单元格A4和A5 。 但是，如果您查看Row 3没有选中任何单选button，则没有任何单元格合并在一起。
我已经在几台计算机上以及几个不同版本的Excel和OpenOffice Calc上尝试过了，所以我不认为这是Excel的问题。 我不确定是什么原因造成这个问题，在这个问题上有一些启发会是非常有帮助的。
这是链接到小提琴和片段如下：
var overall= $('#overall'); $(document).ready(function() { $(':radio').change(function(e) { var row = $(this).closest('.item'); var checkedItems = row.find(":checked:not(:radio[name='attendance'])") if(e.target.name != "attendance"){ if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } }else{ row.find("td.attendance").html("x "+parseFloat($(this).val()/10).toFixed(1)); } }) function getOverall(_checkedItems) { var total = 0; _checkedItems.each(function() { total += parseFloat($(this).val()); }); return total; } }); var tableToExcel = (function() { 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]--><\/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 cloned = $('#copyTable').clone().appendTo('.hidden_table') cloned.find('input[type="radio"]:not(:checked) + span').remove(); var ctx = { worksheet: name || 'Worksheet', table: cloned.html() } cloned.remove(); window.location.href = uri + base64(format(template, ctx)); } })();
table { font-family: arial, sans-serif; border-collapse: collapse; width: 115%; } td, th { border: 1px solid #dddddd; text-align: center; } tr:nth-child(even) { background-color: #dddddd; } .hidden_table{ /*display:none*/ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="copyTable"> <thead> <tr> <th>Team</th> <th>Player</th> <th>Number</th> <th>Position</th> <th>Skating</th> <th>Shooting</th> <th>Passing</th> <th>Puck Control</th> <th>Game Understanding</th> <th>Attendance</th> <th>Overall</th> <th>Attendance </br>Factor</th> </tr> </thead> <tbody> <tr class="item" data-id="1"> <td></td> <td></td> <td></td> <td></td> <td> <form action=""> <input type="radio" name="skating" value="1"><span>1</span> <input type="radio" name="skating" value="2"><span>2</span> <input type="radio" name="skating" value="3"><span>3</span> <input type="radio" name="skating" value="4"><span>4</span> <input type="radio" name="skating" value="5"><span>5</span> <br> <input type="radio" name="skating" value="6"><span>6</span> <input type="radio" name="skating" value="7"><span>7</span> <input type="radio" name="skating" value="8"><span>8</span> <input type="radio" name="skating" value="9"><span>9</span> <input type="radio" name="skating" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="shooting" value="1"><span>1</span> <input type="radio" name="shooting" value="2"><span>2</span> <input type="radio" name="shooting" value="3"><span>3</span> <input type="radio" name="shooting" value="4"><span>4</span> <input type="radio" name="shooting" value="5"><span>5</span> <br> <input type="radio" name="shooting" value="6"><span>6</span> <input type="radio" name="shooting" value="7"><span>7</span> <input type="radio" name="shooting" value="8"><span>8</span> <input type="radio" name="shooting" value="9"><span>9</span> <input type="radio" name="shooting" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="passing" value="1"><span>1</span> <input type="radio" name="passing" value="2"><span>2</span> <input type="radio" name="passing" value="3"><span>3</span> <input type="radio" name="passing" value="4"><span>4</span> <input type="radio" name="passing" value="5"><span>5</span> <br> <input type="radio" name="passing" value="6"><span>6</span> <input type="radio" name="passing" value="7"><span>7</span> <input type="radio" name="passing" value="8"><span>8</span> <input type="radio" name="passing" value="9"><span>9</span> <input type="radio" name="passing" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="puck_control" value="1"><span>1</span> <input type="radio" name="puck_control" value="2"><span>2</span> <input type="radio" name="puck_control" value="3"><span>3</span> <input type="radio" name="puck_control" value="4"><span>4</span> <input type="radio" name="puck_control" value="5"><span>5</span> <br> <input type="radio" name="puck_control" value="6"><span>6</span> <input type="radio" name="puck_control" value="7"><span>7</span> <input type="radio" name="puck_control" value="8"><span>8</span> <input type="radio" name="puck_control" value="9"><span>9</span> <input type="radio" name="puck_control" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="team_play" value="1"><span>1</span> <input type="radio" name="team_play" value="2"><span>2</span> <input type="radio" name="team_play" value="3"><span>3</span> <input type="radio" name="team_play" value="4"><span>4</span> <input type="radio" name="team_play" value="5"><span>5</span> <br> <input type="radio" name="team_play" value="6"><span>6</span> <input type="radio" name="team_play" value="7"><span>7</span> <input type="radio" name="team_play" value="8"><span>8</span> <input type="radio" name="team_play" value="9"><span>9</span> <input type="radio" name="team_play" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="attendance" value="1"><span>1</span> <input type="radio" name="attendance" value="2"><span>2</span> <input type="radio" name="attendance" value="3"><span>3</span> <input type="radio" name="attendance" value="4"><span>4</span> <input type="radio" name="attendance" value="5"><span>5</span> <br> <input type="radio" name="attendance" value="6"><span>6</span> <input type="radio" name="attendance" value="7"><span>7</span> <input type="radio" name="attendance" value="8"><span>8</span> <input type="radio" name="attendance" value="9"><span>9</span> <input type="radio" name="attendance" value="10"><span>10</span> </form> </td> <td class="overall" id="overall"> </td> <td class="attendance" id="attendance"></td> </tr> <tr class="item" data-id="2"> <td></td> <td></td> <td></td> <td></td> <td> <form action=""> <input type="radio" name="skating" value="1"><span>1</span> <input type="radio" name="skating" value="2"><span>2</span> <input type="radio" name="skating" value="3"><span>3</span> <input type="radio" name="skating" value="4"><span>4</span> <input type="radio" name="skating" value="5"><span>5</span> <br> <input type="radio" name="skating" value="6"><span>6</span> <input type="radio" name="skating" value="7"><span>7</span> <input type="radio" name="skating" value="8"><span>8</span> <input type="radio" name="skating" value="9"><span>9</span> <input type="radio" name="skating" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="shooting" value="1"><span>1</span> <input type="radio" name="shooting" value="2"><span>2</span> <input type="radio" name="shooting" value="3"><span>3</span> <input type="radio" name="shooting" value="4"><span>4</span> <input type="radio" name="shooting" value="5"><span>5</span> <br> <input type="radio" name="shooting" value="6"><span>6</span> <input type="radio" name="shooting" value="7"><span>7</span> <input type="radio" name="shooting" value="8"><span>8</span> <input type="radio" name="shooting" value="9"><span>9</span> <input type="radio" name="shooting" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="passing" value="1"><span>1</span> <input type="radio" name="passing" value="2"><span>2</span> <input type="radio" name="passing" value="3"><span>3</span> <input type="radio" name="passing" value="4"><span>4</span> <input type="radio" name="passing" value="5"><span>5</span> <br> <input type="radio" name="passing" value="6"><span>6</span> <input type="radio" name="passing" value="7"><span>7</span> <input type="radio" name="passing" value="8"><span>8</span> <input type="radio" name="passing" value="9"><span>9</span> <input type="radio" name="passing" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="puck_control" value="1"><span>1</span> <input type="radio" name="puck_control" value="2"><span>2</span> <input type="radio" name="puck_control" value="3"><span>3</span> <input type="radio" name="puck_control" value="4"><span>4</span> <input type="radio" name="puck_control" value="5"><span>5</span> <br> <input type="radio" name="puck_control" value="6"><span>6</span> <input type="radio" name="puck_control" value="7"><span>7</span> <input type="radio" name="puck_control" value="8"><span>8</span> <input type="radio" name="puck_control" value="9"><span>9</span> <input type="radio" name="puck_control" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="team_play" value="1"><span>1</span> <input type="radio" name="team_play" value="2"><span>2</span> <input type="radio" name="team_play" value="3"><span>3</span> <input type="radio" name="team_play" value="4"><span>4</span> <input type="radio" name="team_play" value="5"><span>5</span> <br> <input type="radio" name="team_play" value="6"><span>6</span> <input type="radio" name="team_play" value="7"><span>7</span> <input type="radio" name="team_play" value="8"><span>8</span> <input type="radio" name="team_play" value="9"><span>9</span> <input type="radio" name="team_play" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="attendance" value="1"><span>1</span> <input type="radio" name="attendance" value="2"><span>2</span> <input type="radio" name="attendance" value="3"><span>3</span> <input type="radio" name="attendance" value="4"><span>4</span> <input type="radio" name="attendance" value="5"><span>5</span> <br> <input type="radio" name="attendance" value="6"><span>6</span> <input type="radio" name="attendance" value="7"><span>7</span> <input type="radio" name="attendance" value="8"><span>8</span> <input type="radio" name="attendance" value="9"><span>9</span> <input type="radio" name="attendance" value="10"><span>10</span> </form> </td> <td class="overall" id="overall"> </td> <td class="attendance" id="attendance"></td> </tr> </tbody> </table> <div class="hidden_table" id="hidden_table"></div> <div align="center"> <input type="button" onclick="tableToExcel('copyTable', 'Player_scores')" value="Export to Excel"> </div>
这个问题是由表格单元中的<br>标签引起的。 在准备出口时将其移除，如下所示。 另一个选项是从HTML中排除<br> 。
你也可以省略<form>标签。 最好的做法是使用<label>来代替<span> ： <label><input type="radio" name="skating" value="1">1</label> 。
祝你好运！
var overall= $('#overall'); $(document).ready(function() { $(':radio').change(function(e) { var row = $(this).closest('.item'); var checkedItems = row.find(":checked:not(:radio[name='attendance'])") if(e.target.name != "attendance"){ if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } }else{ row.find("td.attendance").html("x "+parseFloat($(this).val()/10).toFixed(1)); } }) function getOverall(_checkedItems) { var total = 0; _checkedItems.each(function() { total += parseFloat($(this).val()); }); return total; } }); var tableToExcel = (function() { 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]--><\/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 cloned = $('#copyTable').clone().appendTo('.hidden_table') cloned.find('input[type="radio"]:not(:checked) + span').remove() .end().find('br').remove(); var ctx = { worksheet: name || 'Worksheet', table: cloned.html() } cloned.remove(); window.location.href = uri + base64(format(template, ctx)); } })();
table { font-family: arial, sans-serif; border-collapse: collapse; width: 115%; } td, th { border: 1px solid #dddddd; text-align: center; } tr:nth-child(even) { background-color: #dddddd; } .hidden_table{ /*display:none*/ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="copyTable"> <thead> <tr> <th>Team</th> <th>Player</th> <th>Number</th> <th>Position</th> <th>Skating</th> <th>Shooting</th> <th>Passing</th> <th>Puck Control</th> <th>Game Understanding</th> <th>Attendance</th> <th>Overall</th> <th>Attendance Factor</th> </tr> </thead> <tbody> <tr class="item" data-id="1"> <td></td> <td></td> <td></td> <td></td> <td> <form action=""> <input type="radio" name="skating" value="1"><span>1</span> <input type="radio" name="skating" value="2"><span>2</span> <input type="radio" name="skating" value="3"><span>3</span> <input type="radio" name="skating" value="4"><span>4</span> <input type="radio" name="skating" value="5"><span>5</span> <br> <input type="radio" name="skating" value="6"><span>6</span> <input type="radio" name="skating" value="7"><span>7</span> <input type="radio" name="skating" value="8"><span>8</span> <input type="radio" name="skating" value="9"><span>9</span> <input type="radio" name="skating" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="shooting" value="1"><span>1</span> <input type="radio" name="shooting" value="2"><span>2</span> <input type="radio" name="shooting" value="3"><span>3</span> <input type="radio" name="shooting" value="4"><span>4</span> <input type="radio" name="shooting" value="5"><span>5</span> <br> <input type="radio" name="shooting" value="6"><span>6</span> <input type="radio" name="shooting" value="7"><span>7</span> <input type="radio" name="shooting" value="8"><span>8</span> <input type="radio" name="shooting" value="9"><span>9</span> <input type="radio" name="shooting" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="passing" value="1"><span>1</span> <input type="radio" name="passing" value="2"><span>2</span> <input type="radio" name="passing" value="3"><span>3</span> <input type="radio" name="passing" value="4"><span>4</span> <input type="radio" name="passing" value="5"><span>5</span> <br> <input type="radio" name="passing" value="6"><span>6</span> <input type="radio" name="passing" value="7"><span>7</span> <input type="radio" name="passing" value="8"><span>8</span> <input type="radio" name="passing" value="9"><span>9</span> <input type="radio" name="passing" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="puck_control" value="1"><span>1</span> <input type="radio" name="puck_control" value="2"><span>2</span> <input type="radio" name="puck_control" value="3"><span>3</span> <input type="radio" name="puck_control" value="4"><span>4</span> <input type="radio" name="puck_control" value="5"><span>5</span> <br> <input type="radio" name="puck_control" value="6"><span>6</span> <input type="radio" name="puck_control" value="7"><span>7</span> <input type="radio" name="puck_control" value="8"><span>8</span> <input type="radio" name="puck_control" value="9"><span>9</span> <input type="radio" name="puck_control" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="team_play" value="1"><span>1</span> <input type="radio" name="team_play" value="2"><span>2</span> <input type="radio" name="team_play" value="3"><span>3</span> <input type="radio" name="team_play" value="4"><span>4</span> <input type="radio" name="team_play" value="5"><span>5</span> <br> <input type="radio" name="team_play" value="6"><span>6</span> <input type="radio" name="team_play" value="7"><span>7</span> <input type="radio" name="team_play" value="8"><span>8</span> <input type="radio" name="team_play" value="9"><span>9</span> <input type="radio" name="team_play" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="attendance" value="1"><span>1</span> <input type="radio" name="attendance" value="2"><span>2</span> <input type="radio" name="attendance" value="3"><span>3</span> <input type="radio" name="attendance" value="4"><span>4</span> <input type="radio" name="attendance" value="5"><span>5</span> <br> <input type="radio" name="attendance" value="6"><span>6</span> <input type="radio" name="attendance" value="7"><span>7</span> <input type="radio" name="attendance" value="8"><span>8</span> <input type="radio" name="attendance" value="9"><span>9</span> <input type="radio" name="attendance" value="10"><span>10</span> </form> </td> <td class="overall" id="overall"> </td> <td class="attendance" id="attendance"></td> </tr> <tr class="item" data-id="2"> <td></td> <td></td> <td></td> <td></td> <td> <form action=""> <input type="radio" name="skating" value="1"><span>1</span> <input type="radio" name="skating" value="2"><span>2</span> <input type="radio" name="skating" value="3"><span>3</span> <input type="radio" name="skating" value="4"><span>4</span> <input type="radio" name="skating" value="5"><span>5</span> <br> <input type="radio" name="skating" value="6"><span>6</span> <input type="radio" name="skating" value="7"><span>7</span> <input type="radio" name="skating" value="8"><span>8</span> <input type="radio" name="skating" value="9"><span>9</span> <input type="radio" name="skating" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="shooting" value="1"><span>1</span> <input type="radio" name="shooting" value="2"><span>2</span> <input type="radio" name="shooting" value="3"><span>3</span> <input type="radio" name="shooting" value="4"><span>4</span> <input type="radio" name="shooting" value="5"><span>5</span> <br> <input type="radio" name="shooting" value="6"><span>6</span> <input type="radio" name="shooting" value="7"><span>7</span> <input type="radio" name="shooting" value="8"><span>8</span> <input type="radio" name="shooting" value="9"><span>9</span> <input type="radio" name="shooting" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="passing" value="1"><span>1</span> <input type="radio" name="passing" value="2"><span>2</span> <input type="radio" name="passing" value="3"><span>3</span> <input type="radio" name="passing" value="4"><span>4</span> <input type="radio" name="passing" value="5"><span>5</span> <br> <input type="radio" name="passing" value="6"><span>6</span> <input type="radio" name="passing" value="7"><span>7</span> <input type="radio" name="passing" value="8"><span>8</span> <input type="radio" name="passing" value="9"><span>9</span> <input type="radio" name="passing" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="puck_control" value="1"><span>1</span> <input type="radio" name="puck_control" value="2"><span>2</span> <input type="radio" name="puck_control" value="3"><span>3</span> <input type="radio" name="puck_control" value="4"><span>4</span> <input type="radio" name="puck_control" value="5"><span>5</span> <br> <input type="radio" name="puck_control" value="6"><span>6</span> <input type="radio" name="puck_control" value="7"><span>7</span> <input type="radio" name="puck_control" value="8"><span>8</span> <input type="radio" name="puck_control" value="9"><span>9</span> <input type="radio" name="puck_control" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="team_play" value="1"><span>1</span> <input type="radio" name="team_play" value="2"><span>2</span> <input type="radio" name="team_play" value="3"><span>3</span> <input type="radio" name="team_play" value="4"><span>4</span> <input type="radio" name="team_play" value="5"><span>5</span> <br> <input type="radio" name="team_play" value="6"><span>6</span> <input type="radio" name="team_play" value="7"><span>7</span> <input type="radio" name="team_play" value="8"><span>8</span> <input type="radio" name="team_play" value="9"><span>9</span> <input type="radio" name="team_play" value="10"><span>10</span> </form> </td> <td> <form action=""> <input type="radio" name="attendance" value="1"><span>1</span> <input type="radio" name="attendance" value="2"><span>2</span> <input type="radio" name="attendance" value="3"><span>3</span> <input type="radio" name="attendance" value="4"><span>4</span> <input type="radio" name="attendance" value="5"><span>5</span> <br> <input type="radio" name="attendance" value="6"><span>6</span> <input type="radio" name="attendance" value="7"><span>7</span> <input type="radio" name="attendance" value="8"><span>8</span> <input type="radio" name="attendance" value="9"><span>9</span> <input type="radio" name="attendance" value="10"><span>10</span> </form> </td> <td class="overall" id="overall"> </td> <td class="attendance" id="attendance"></td> </tr> </tbody> </table> <div class="hidden_table" id="hidden_table"></div> <div align="center"> <input type="button" onclick="tableToExcel('copyTable', 'Player_scores')" value="Export to Excel"> </div>