网页自动计算成绩

网页自动计算成绩

点击即可自动实时计算成绩
代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
head>
<body>
<div class="container">

    <table id="Order" class="table table-striped">
        <tr>
            <th>名目th>
            <th>评价1th>
            <th>评价2th>
            <th>评价3th>
            <th>评价4th>
        tr>
        <tr>
            <td>语文td>
            <td><label><input name="yuwen" type="radio" value="4"/>1label>td>
            <td><label><input name="yuwen" type="radio" value="3"/>2label>td>
            <td><label><input name="yuwen" type="radio" value="2"/>3label>td>
            <td><label><input name="yuwen" type="radio" value="1"/>4label>td>
        tr>
        <tr>
            <td>数学td>
            <td><label><input name="shuxue" type="radio" value="4"/>1label>td>
            <td><label><input name="shuxue" type="radio" value="3"/>2label>td>
            <td><label><input name="shuxue" type="radio" value="2"/>3label>td>
            <td><label><input name="shuxue" type="radio" value="1"/>4label>td>
        tr>
        <tr>
            <td>英语td>
            <td><label><input name="yingyu" type="radio" value="4"/>1label>td>
            <td><label><input name="yingyu" type="radio" value="3"/>2label>td>
            <td><label><input name="yingyu" type="radio" value="2"/>3label>td>
            <td><label><input name="yingyu" type="radio" value="1"/>4label>td>
        tr> <tr>
            <td>英语td>
            <td><label><input name="zhengzhi" type="radio" value="4"/>1label>td>
            <td><label><input name="zhengzhi" type="radio" value="3"/>2label>td>
            <td><label><input name="zhengzhi" type="radio" value="2"/>3label>td>
            <td><label><input name="zhengzhi" type="radio" value="1"/>4label>td>
        tr>


        <tr id="trData">
            <td colspan="4" style="text-align:right;">总计td>
            <td><span id="total">span>td>
        tr>
    table>


div>
<script>

  
    let itemslist = $("input:radio")
    itemarray = []
//读取所有的name属性
    $.each(itemslist, function (index, val) {
        itemarray.push(val.name)

    });
    newarry = Array.from([...new Set(itemarray)])
//去掉重复元素
    console.log(newarry)
    $("input:radio").on("click", function () {
        alltems = 0

        for (items in newarry) {

            let s = "[name=" + newarry[items] + "]"
            for (var i = 0; i < $(s).length; i++) {
                if ($(s)[i].checked == true) {
                    alltems = parseInt($(s)[i].value) + alltems;
//计算成绩和
                }
            }
        }
        $('#total').text(alltems)
//把计算值写到页面上
    });


script>
body>
html>

你可能感兴趣的:(前端)