JQuery DOM操作实例-蒲公英云

JQuery DOM操作实例

怼烎@ 2023-06-13 03:24 25阅读 0赞

这几天在公司一直在忙一些页面的工作，对jQuery的DOM操作有较深的印象，像元素遍历、选择器等

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="layui/css/layui.css"  media="all">
<script src="js/jquery-1.11.2.min.js"></script>
<title>Test</title>
</head>
<script>
var num = /^[0-9]+$/;
$(function(){
    bindEvent(1);
    bindEvent(2);
    bindEvent(3);
    $("table tr:not(:first):not(:last)").each(function(){
        var male_count = $(this).find("td").eq(1).find("input").val();
        var female_count = $(this).find("td").eq(2).find("input").val();
        if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
          $(this).find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
        }
    })
    calSum(1);
    calSum(2);
    calSum(3);
})
//绑定监听事件
function bindEvent(index){
    $("table tr:eq("+index+") td:eq(1)").keyup(function(){
        var male_count = $(this).find("input").val();
        var female_count = $(this).next().find("input").val();
        if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
          $(this).parent().find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
        }
        calSum(1);
        calSum(3);
    })
    $("table tr:eq("+index+") td:eq(2)").keyup(function(){
        var male_count = $(this).prev().find("input").val();
        var female_count = $(this).find("input").val();
        if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
          $(this).parent().find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
        }
        calSum(2);
        calSum(3);
    })
}
//计算合计
function calSum(index){
    var sum = 0;
    $("table tr:not(:first):not(:last)").each(function(){
        var td_ = $(this).find("td").eq(index);
        var count;
        if(index == 3){
            count = td_.text();
        }else{
            count = td_.find("input").val();
        }
        if(num.test(count)){
            sum = sum + parseInt(count);
        }
    })
    $("table tr:last td:eq("+index+")").text(sum);
}
</script>
<body>
<table class="layui-table" style="width:600px">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="150">
      <col width="150">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>班级号</th>
        <th>男生数</th>
        <th>男生数</th>
        <th>总人数</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"></td>
      </tr>
      <tr>
        <td>1002</td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"></td>
      </tr>
      <tr>
        <td>1003</td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"><input  class="layui-input" value="50"/></td>
        <td class="input-select-td"></td>
      </tr>
      <tr>
        <td>总计</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
<script>
</script>
</body>
</html>