jquery实现select选中行、列合计示例

  Jquery 方法

  

复制代码 代码如下:

  $(

  function () {

  //页面加载时计算人员统计表合计值

  calcSum();

  });

  //合计行计算

  /*

  以合计行为中间变量

  每个单元格与该列合计行相加

  得到每列合计

  */

  function trVisible(chk, index) {

  var disValue = $("#Tr" + index).css("display");

  if (chk.checked) {

  $("#Tr" + index).css("display", "block");

  }

  else {

  $("#Tr" + index).css("display", "none");

  }

  calcSum();

  }

  function calcSum() {

  //合计行赋初始值0

  $("#trSum").each(function () {

  $(this).find("td").each(function () {

  if ($(this).index() != 0) {

  $(this).text("0");

  }

  });

  });

  $("#tabrytj").find("tr").each(function () {

  var trDis = $(this).css("display");

  //隐藏行不参与计算

  if (trDis == "block") {

  $(this).find("td").each(function () {

  var index = $(this).index();

  if (index >= 1) {

  var tdValue = $("#trSum").find("td:eq(" + index + ")").text();

  //totalSum += parseFloat($(this).text());

  $("#trSum").find("td:eq(" + index + ")").text(parseFloat(tdValue) + parseFloat($(this).text()));

  }

  });

  }

  });

  }

  html语句

  

复制代码 代码如下:

  <table>

  <tr>

  <td>分公司</td>

  <td>

  <select>

  <option>

  华南分公司

  </option>

  </select>

  </td>

  <td><input type="checkbox" onclick="trVisible(this,1)" name="chk1" id="chk1" checked="checked" />张1</td>

  <td><input type="checkbox" onclick="trVisible(this,2)" checked="checked" />张2</td>

  <td><input type="checkbox" onclick="trVisible(this,3)" checked="checked" />张3</td>

  <td><input type="checkbox" onclick="trVisible(this,4)" checked="checked" />张4</td>

  <td><input type="checkbox" onclick="trVisible(this,5)" checked="checked" />张5</td>

  <td><input type="checkbox" onclick="trVisible(this,6)" checked="checked" />张6</td>

  </tr>

  </table>

  <div>

  <table border="0" class="tableinfo" id="tabrytj">

  <tr id="Tr1" style="display:block">

  <td>张1 </td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  </tr>

  <tr id="Tr2" style="display:block">

  <td>张2 </td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  </tr>

  <tr id="Tr3" style="display:block">

  <td>张23 </td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  <td>124536</td>

  </tr>

  <tr id="trSum">

  <td></td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  <td>0</td>

  </tr>

  </table>

  </div>