Question

我根据数据库数据生成了以下表格：

如何对每行和每列求和并将每个列验证为100 每行和每列100的唯一总和被允许提交表单否则错误消息将出现在＆lt; 100或＆gt; 100行或列旁边保存按钮被锁定，直到数据正确。

我的代码：

<style>
    table td{
        padding: 10px;
    }
</style>
<?php
    $course_id = $_GET['course_id'];
    $div_cou = explode(",",$course_id);
    $cou_id = $div_cou[0];
    $cou_name = $div_cou[1];

    $dbhost = "xxx";
    $dbuser = "xxx";
    $con    = mysqli_connect($dbhost, $dbuser, "");
    if (!$con) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    mysqli_select_db($con, 'xxx');

    $q = mysqli_query($con, "SELECT * FROM `plo` WHERE `COURSE_CODE`='$cou_id'");
    if (mysqli_num_rows($q) !=null) {
        $plos = "<p style='color:#B3175D;'>Program Learning Outcome List:</p><ol>";
        $countPlos = 0;
        $plosArray = array();
        while ($db_field = mysqli_fetch_assoc($q)) {
            $plos .= "<li>".$db_field['PLO_DESC']."</li>";
            $plosArray[$countPlos]['id']=$db_field['PLO_CODE'];
            $plosArray[$countPlos]['desc']=$db_field['PLO_DESC'];
            $countPlos++;
        }
        $plos .="</ol>";
    }
    echo $plos;

    $q = mysqli_query($con, "SELECT * FROM `slo` WHERE `COURSE_CODE`='$cou_id'");
    if (mysqli_num_rows($q) !=null) {
        $slos = "<p style='color:#037879;'>Student Learning Outcome List:</p><ol>";
        $countSlos = 0;
        $slosArray = array();
        while ($db_field = mysqli_fetch_assoc($q)) {
            $slos .= "<li style='list-style:decimal;'>".$db_field['SLO_DESC']."</li>";
            $slosArray[$countSlos]['id']=$db_field['SLO_CODE'];
            $slosArray[$countSlos]['desc']=$db_field['SLO_DESC'];
            $countSlos++;
        }
        $slos .="</ol>";
    }
    echo $slos;

    if ($countSlos)
    {
        $map = NULL;
        $map = "<p>Mapping SLO's to PLO's:</p><table>";

        $map .= "<tr><td></td>";
        $num = 1;
        for ($y = 0; $y < $countPlos; $y++) {
            $map .= "<td style='color:#B3175D;'>PLO".$num."</td>";
            $num++;
        }
        $map .="<td>Total</td></tr>";

        $num = 1;
        for ($x = 0; $x < $countSlos; $x++) { 
            $map .= "<tr><td style='color:#037879;'>SLO".$num."</td>";
            for ($y = 0; $y < $countPlos; $y++) {
                $map .= "<td><li style='list-style:none;'><input type='number' min='0' max='100' name='map[]' style='display: block;width: 50px;float: left;margin-right: 5px;text-align: left;'/><input type='hidden' name='sloPlo_ids[]' value='".$plosArray[$y]['id'].",".$slosArray[$x]['id']."'/></li></td>";
            }
            $map .="<td>Sum Row.</td>";
            $num++;
            $map .= "</tr>";
        }

        $map .="<tr><td>Total</td>";
        for ($y = 0; $y < $countPlos; $y++) {
            $map .="<td>Sum Col.</td>";
        }
        $map .="</tr>";
        echo $map."</table>";
    }
?>

快速链接： Fiddle

Answer 1

https://jsfiddle.net/sudarpochong/fghj7no4/1/

我修改了你的HTML。

要对行和列求和，我们只需调用sumThisClass方法。请检查我的小提琴。

function sumThisClass(className) {

  var sumTotal = 0;
  $("." + className).each(function(index, el) {
    let elValue = parseInt($(el).val());
    if (!isNaN(elValue)) {
      sumTotal += parseInt($(el).val());
    }
  });

  $(".sum-" + className).text(sumTotal);

  if (sumTotal > 100) {
    $(".sum-" + className).append("<div class='error'>cannot be greater than 100</div>");
  }

}

jQuery验证：每行和每列总共100个

1 个答案: