复选框一个按钮控制js table添加删除一行

需求：
两个不同的复选框按钮（求和，求平均值），
点击求和在table里添加一个求和的行
再点击求和复选框删除刚添加的那个求和行

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <!--
             描述：这一段 请自行更换
            -->
    <script type="text/javascript" src="../../../js/jquery-2.2.4.min.js" ></script>
    <style>
    tr td,
    tr th{width: 50px;height: 50px;border: 1px solid blue;}
    </style>
    <script>
    $(function(){
    let isSelect = false;
    $('.check_btn').change(function(){
    isSelect = !isSelect;
    if(isSelect){
    $('.table-test thead tr').append('<th>求和</th>');
    $('.table-test tbody tr').each((index,item)=>{
    $(item).append('<td></td>');
    })
    }else{
    console.log($('.table-test thead tr').children().eq(-1).text())
    $('.table-test thead tr').children().eq(-1).remove();
    $('.table-test tbody tr').each((index,item)=>{
    $(item).children().eq(-1).remove();
    })
    }
    });
    })
    </script>
    </head>
    <body>
    <input type="checkbox" class="check_btn"/> 求和
    <br />
    <table cellpadding="0" cellspacing="0" class="table-test">
    <thead>
    <tr>
    <th>项</th>
    <th>项</td>
    <th>项</td>
    <th>项</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>