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>

最佳答案

这有点骇人听闻,但我认为我可以正常工作
请注意,我将单选输入后的文本包裹在 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/

相关文章:

javascript - jQuery.on ('click' ) 在 jQuery.click 之前?

jQuery-UI slider - 如何禁用键盘输入?

javascript - 当取决于屏幕分辨率时如何计算每行中显示的div的数量

html - 如何为垂直文本赋予2种不同颜色的字体,以使文本1和文本2处于一个“div类”中?

javascript - 接收var声明字符串,仅保存值

javascript - jQuery触发菜单上的fadeIn和fadeOut

javascript - 根据属性值lodash将对象数组中的属性合并到另一个对象中

javascript - 覆盖 appendChild()

c# - 在工具提示中显示 Web 表单

html - html标签使用大写字母是不是不好?