javascript - 如何将单选按钮的值导出到 Excel

标签 javascript jquery html css excel

好的，我有一个表，该表中的某些列有单选按钮，我用值 1 到 10 标记了这些单选按钮，我还有一个“导出到 Excel”按钮，可将该表导出到 Excel 文件，但是，当它导出时，它会导出每个具有单选按钮的列中所有单选按钮的值，我只希望它导出每列中选定的单选按钮的值，而不是所有单选按钮的值每列中的按钮，哦，顺便说一句，“导出到 Excel”按钮在 Stack Overflow 的预览中不起作用，因此如果您希望它起作用，您只需复制代码并将其另存为硬盘上的程序驱动器，无论如何，这是我的代码，感谢您花时间尝试解决此问题:

    var overall= $('#overall');

    $(document).ready(function() {
    $(':radio').change(function() {
    var row = $(this).closest('.item'); 
    var checkedItems = row.find(":checked")
    if (checkedItems.length == 6) {
    row.find("td.overall").html(getOverall(checkedItems));
    }
    })

    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 ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    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: left;
  padding: 5px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}   
div {
  padding-top: 10px;
}
<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>Skating</th>
  <th>Shooting</th>
  <th>Passing</th>
  <th>Puck Control</th>
  <th>Team Play</th>
  <th>Attendance</th>
  <th>Overall</th>
    </tr>
  </thead>
  <tbody>
<tr class="item" data-id="1">
  <td></td>
  <td></td>
  <td></td>
  <td>
    <form action="">
      <input type="radio" name="skating" value="1">1
      <input type="radio" name="skating" value="2">2
      <input type="radio" name="skating" value="3">3
      <input type="radio" name="skating" value="4">4
      <input type="radio" name="skating" value="5">5
      <br>
      <input type="radio" name="skating" value="6">6
      <input type="radio" name="skating" value="7">7
      <input type="radio" name="skating" value="8">8
      <input type="radio" name="skating" value="9">9
      <input type="radio" name="skating" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="shooting" value="1">1
      <input type="radio" name="shooting" value="2">2
      <input type="radio" name="shooting" value="3">3
      <input type="radio" name="shooting" value="4">4
      <input type="radio" name="shooting" value="5">5
      <br>
      <input type="radio" name="shooting" value="6">6
      <input type="radio" name="shooting" value="7">7
      <input type="radio" name="shooting" value="8">8
      <input type="radio" name="shooting" value="9">9
      <input type="radio" name="shooting" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="passing" value="1">1
      <input type="radio" name="passing" value="2">2
      <input type="radio" name="passing" value="3">3
      <input type="radio" name="passing" value="4">4
      <input type="radio" name="passing" value="5">5
      <br>
      <input type="radio" name="passing" value="6">6
      <input type="radio" name="passing" value="7">7
      <input type="radio" name="passing" value="8">8
      <input type="radio" name="passing" value="9">9
      <input type="radio" name="passing" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="puck_control" value="1">1
      <input type="radio" name="puck_control" value="2">2
      <input type="radio" name="puck_control" value="3">3
      <input type="radio" name="puck_control" value="4">4
      <input type="radio" name="puck_control" value="5">5
      <br>
      <input type="radio" name="puck_control" value="6">6
      <input type="radio" name="puck_control" value="7">7
      <input type="radio" name="puck_control" value="8">8
      <input type="radio" name="puck_control" value="9">9
      <input type="radio" name="puck_control" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="team_play" value="1">1
      <input type="radio" name="team_play" value="2">2
      <input type="radio" name="team_play" value="3">3
      <input type="radio" name="team_play" value="4">4
      <input type="radio" name="team_play" value="5">5
      <br>
      <input type="radio" name="team_play" value="6">6
      <input type="radio" name="team_play" value="7">7
      <input type="radio" name="team_play" value="8">8
      <input type="radio" name="team_play" value="9">9
      <input type="radio" name="team_play" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="attendance" value="1">1
      <input type="radio" name="attendance" value="2">2
      <input type="radio" name="attendance" value="3">3
      <input type="radio" name="attendance" value="4">4
      <input type="radio" name="attendance" value="5">5
      <br>
      <input type="radio" name="attendance" value="6">6
      <input type="radio" name="attendance" value="7">7
      <input type="radio" name="attendance" value="8">8
      <input type="radio" name="attendance" value="9">9
      <input type="radio" name="attendance" value="10">10
    </form>
  </td>
  <td class="overall" id="overall">
  </td>

</tr>
<tr class="item" data-id="2">
  <td></td>
  <td></td>
  <td></td>
  <td>
    <form action="">
      <input type="radio" name="skating" value="1">1
      <input type="radio" name="skating" value="2">2
      <input type="radio" name="skating" value="3">3
      <input type="radio" name="skating" value="4">4
      <input type="radio" name="skating" value="5">5
      <br>
      <input type="radio" name="skating" value="6">6
      <input type="radio" name="skating" value="7">7
      <input type="radio" name="skating" value="8">8
      <input type="radio" name="skating" value="9">9
      <input type="radio" name="skating" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="shooting" value="1">1
      <input type="radio" name="shooting" value="2">2
      <input type="radio" name="shooting" value="3">3
      <input type="radio" name="shooting" value="4">4
      <input type="radio" name="shooting" value="5">5
      <br>
      <input type="radio" name="shooting" value="6">6
      <input type="radio" name="shooting" value="7">7
      <input type="radio" name="shooting" value="8">8
      <input type="radio" name="shooting" value="9">9
      <input type="radio" name="shooting" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="passing" value="1">1
      <input type="radio" name="passing" value="2">2
      <input type="radio" name="passing" value="3">3
      <input type="radio" name="passing" value="4">4
      <input type="radio" name="passing" value="5">5
      <br>
      <input type="radio" name="passing" value="6">6
      <input type="radio" name="passing" value="7">7
      <input type="radio" name="passing" value="8">8
      <input type="radio" name="passing" value="9">9
      <input type="radio" name="passing" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="puck_control" value="1">1
      <input type="radio" name="puck_control" value="2">2
      <input type="radio" name="puck_control" value="3">3
      <input type="radio" name="puck_control" value="4">4
      <input type="radio" name="puck_control" value="5">5
      <br>
      <input type="radio" name="puck_control" value="6">6
      <input type="radio" name="puck_control" value="7">7
      <input type="radio" name="puck_control" value="8">8
      <input type="radio" name="puck_control" value="9">9
      <input type="radio" name="puck_control" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="team_play" value="1">1
      <input type="radio" name="team_play" value="2">2
      <input type="radio" name="team_play" value="3">3
      <input type="radio" name="team_play" value="4">4
      <input type="radio" name="team_play" value="5">5
      <br>
      <input type="radio" name="team_play" value="6">6
      <input type="radio" name="team_play" value="7">7
      <input type="radio" name="team_play" value="8">8
      <input type="radio" name="team_play" value="9">9
      <input type="radio" name="team_play" value="10">10
    </form>
  </td>
<td>
<form action="">
  <input type="radio" name="attendance" value="1">1
  <input type="radio" name="attendance" value="2">2
  <input type="radio" name="attendance" value="3">3
  <input type="radio" name="attendance" value="4">4
  <input type="radio" name="attendance" value="5">5
  <br>
  <input type="radio" name="attendance" value="6">6
  <input type="radio" name="attendance" value="7">7
  <input type="radio" name="attendance" value="8">8
  <input type="radio" name="attendance" value="9">9
  <input type="radio" name="attendance" value="10">10
</form>
</td>
  <td class="overall" id="overall">
  </td>

</tr>
  </tbody>
</table>
<div align="center">
<input type="button" onclick="tableToExcel('copyTable')" value="Export to Excel">
</div>

最佳答案

这有点hacky，但我想我可以正常工作 请注意，我将 radio 输入后面的文本包装在 span

中

我所做的是将表格克隆到隐藏的 div 中，删除所有未选中的单选按钮，然后将其用于 Excel 文件，然后删除克隆的元素

var overall = $('#overall');

$(document).ready(function() {
  $(':radio').change(function() {
    var row = $(this).closest('.item');
    var checkedItems = row.find(":checked")
    if (checkedItems.length == 6) {
      row.find("td.overall").html(getOverall(checkedItems));
    }
  })

  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: left;
  padding: 5px;
  text-align: center
}

tr:nth-child(even) {
  background-color: #dddddd;
}

div {
  padding-top: 10px;
}
.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>Skating</th>
      <th>Shooting</th>
      <th>Passing</th>
      <th>Puck Control</th>
      <th>Team Play</th>
      <th>Attendance</th>
      <th>Overall</th>
    </tr>
  </thead>
  <tbody>
    <tr class="item" data-id="1">
      <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>

    </tr>
    <tr class="item" data-id="2">
      <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>

    </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>

关于javascript - 如何将单选按钮的值导出到 Excel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42514633/

上一篇：jquery - 使用 jquery 移动 div

下一篇：html - 如何使用 bootstrap css 将 2 个输入合并为 1 个输入？

相关文章：

javascript - 具有动态子组件的 ReactJS 布局组件

javascript - jQuery addClass 定位正确的元素 - 但有时只应用类

jquery - 使用 jQuery 滑动不同的高度

html - IE8 中的简单 float DIV 布局不起作用

html - 防止移动浏览器显示 body 外的元素？

javascript - 如何将自定义图标添加到NativeBase

javascript - 如何在 Angular2 中使用 Cookie 服务？

javascript - 更改 flot.js 中线条的颜色

javascript - 刷新后重置本地存储值

html - 表格行可以没有单元格吗？

©2024 IT工具网  联系我们