条件合并时拉出数据属性列表

时间：2018-01-18 17:01:54

标签： javascript jquery html css

所以我有一个HTML表格，每个单元格中有10个单选按钮（除了标题单元格）。完成选择单选按钮后，单击底部的导出到Excel 按钮。这将通过您的单选按钮选择为您下载Excel文件。

现在我要做的是检测前5个单元格中选择了多少个单选按钮，每行有单选按钮。如果它在1和之间5我想要一个简单的<div>弹出窗口，其中包含符合这些条件的行列表及其data-id属性。在那个弹出窗口中，我只需要它有一个 Okay ＆amp; 取消按钮。当用户点击 Okay 时，它会下载Excel文件;否则，如果用户单击取消按钮，则不会下载Excel文件。

我知道我需要在tableToExcel函数中插入这样的内容：

var checkedItems = row.find(":checked:not(:radio[name='attendance'])") if (checkedItems.length >= 1 && < 5) { enter code here }

然后当用户在弹出窗口中选择 Okay 时运行剩余的tableToExcel代码，但我不确定如何调用data-id的<tr>满足条件并为弹出窗口汇总它们的列表。

以下是fiddle，摘录如下：

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>

2 个答案:

答案 0 :(得分：3)

这很有效。

我刚刚在模态对话框中显示了data-id。

要知道我是如何创建模态对话框的，See my answer here

＆＃13;
＆＃13; 
var overall = $('#overall');
var rows = [];
var toggleDialog = function()
{
    var dialog = document.getElementById("modal_container");
    dialog.style.display = (dialog.style.display=="none"?"block":"none");
}

var populateModalData = function()
{
    $("#modaldata").html(rows.join(","));
    toggleDialog();
}

$(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")
    {
        var id = row.data("id");
        if (checkedItems.length == 5)
        {
            if(rows.indexOf(id)<0) rows.push(id);
            row.find("td.overall").html(getOverall(checkedItems));
            populateModalData();
        }
        else
        {
            if(rows.indexOf(id)>-1) rows.splice(rows.indexOf(id),1); 
        }
    } 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));
  }
})();
＆＃13; 
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*/
}

/*modal start*/
#modal_container
{
    position:fixed;
    height: 100%;
    width:100%;
    margin: 0;
    top: 0;
    left: 0;
    background: #9e9c9c;
    z-index:100000;
}
#modal
{
    position: absolute;
    height: 200px;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    margin: auto;
    vertical-align: middle;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}
.closebtn
{
    position: absolute;
    top:10px;
    right:10px;
    cursor: pointer;
}
.buttongroup
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}
/* modal end */
＆＃13; 
<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="populateModalData()" value="Export to Excel">
</div>

<div id="modal_container" style="display: none">
    <div id="modal">
        <span class="closebtn" onclick="toggleDialog()">Close</span>
        <div id="modaldata"></div>
        <div class="buttongroup">
            <button onclick="tableToExcel('copyTable', 'Player_scores')">Okay</button>
            <button onclick="toggleDialog()">Cancel</button>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

因此，如果我正确理解您的问题，您希望获得data-id处理程序中的change？

如果是，那么您恰好引用了周围的<tr>：

  $(':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));
    }
  console.log('data-id=', row[0].dataset.id)
  })

因此row[0]是实际的<tr>元素，row[0].dataset.id是data-id属性的值。

相关问题
最新问题