使用 jQuery Ajax 计算每个表行

Question

我刚刚进入 Ajax/jQuery 并希望有人可以帮助我解决这个问题。

我有一个从 php 生成的多行表。 在每个 TR 行上，我有一个我想用来计算时间的 3 个字段（天、小时、分钟）。 变量发布到 ajax.php 文件以进行计算。 并且响应应该填充每个表格行的#totalhrs 输入字段。

到目前为止，我已经让它工作了，但只在第一行，而且只有当我调用那组特定的 ID 时。

我相信我这样做的方式非常丑陋，我在想必须有一种更好更有效的方式。

提前致谢

index.php

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".task").click(function() {
    var days=$("#aaa_1_days").val();
    var hrs=$("#aaa_1_hrs").val();
    var mins=$("#aaa_1_mins").val();
    $.ajax({
      url:'ajax.php',
      data:{days:days, hrs:hrs, mins:mins},
      type:'POST',
      success:function(data) {
        $("#aaa_1_totalhrs").val(data);
      }
    });
  });
});

</script>

</head>

<body>

<table>
    <tr>
       <td><input type='number'  class='task' name='aaa_1_days'      id='aaa_1_days'     value='' min='0'  /></td>
       <td><input type='number'  class='task' name='aaa_1_hrs'       id='aaa_1_hrs'      value='' min='0'  /></td>
       <td><input type='number'  class='task' name='aaa_1_mins'      id='aaa_1_mins'     value='' min='0' max='45' step='15' /></td>
       <td><input type='text'    class='task' name='aaa_1_totalhrs'  id='aaa_1_totalhrs' value='' min='0' readonly /></td>
   </tr>
    <tr>
       <td><input type='number'  class='task' name='bbb_2_days'      id='bbb_2_days'     value='' min='0'  /></td>
       <td><input type='number'  class='task' name='bbb_2_hrs'       id='bbb_2_hrs'      value='' min='0'  /></td>
       <td><input type='number'  class='task' name='bbb_2_mins'      id='bbb_2_mins'     value='' min='0' max='45' step='15' /></td>
       <td><input type='text'    class='task' name='bbb_2_totalhrs'  id='bbb_2_totalhrs' value='' min='0' readonly /></td>
   </tr>
    <tr>
       <td><input type='number'  class='task' name='ccc_3_days'      id='ccc_3_days'     value='' min='0'  /></td>
       <td><input type='number'  class='task' name='ccc_3_hrs'       id='ccc_3_hrs'      value='' min='0'  /></td>
       <td><input type='number'  class='task' name='ccc_3_mins'      id='ccc_3_mins'     value='' min='0' max='45' step='15' /></td>
       <td><input type='text'    class='task' name='ccc_3_totalhrs'  id='ccc_3_totalhrs' value='' min='0' readonly /></td>
   </tr>
</table>

</body>
</html>

ajax.php

<?php

$post_days = $_POST['days'];
$post_hrs = $_POST['hrs'];
$post_mins = $_POST['mins'];

if($post_days){$days = $post_days*8;} else $days = 0;
if($post_hrs){$hrs = $post_hrs;} else $hrs = 0;

if($post_mins=='15'){$mins = 0.25;}
else if($post_mins=='30'){$mins = 0.5;}
else if($post_mins=='45'){$mins = 0.75;}
else $mins = 0;

$total = ($days+$hrs+$mins);

echo $total;

?>

Answer 1

您可以使用class从输入框中获取所需的值。 然后，使用$(this).closest("tr")从发生更改事件的输入框中获取最接近的tr ，最后使用.find("yourclassname")获取输入值。

演示代码：

 $(document).ready(function() { $(".task").change(function() { //get closest tr var selector = $(this).closest("tr"); //use.find to get requred inputs var days = selector.find(".days").val(); var hrs = selector.find(".hrs").val(); var mins = selector.find(".mins").val(); console.log(days + " " + hrs + " " + mins) $.ajax({ url: 'ajax.php', data: { days: days, hrs: hrs, mins: mins }, type: 'POST', success: function(data) { selector.find(".totalhrs").val(data); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <!--use class--> <td><input type='number' class='task days' name='aaa_1_days' id='aaa_1_days' value='' min='0' /></td> <td><input type='number' class='task hrs' name='aaa_1_hrs' id='aaa_1_hrs' value='' min='0' /></td> <td><input type='number' class='task mins' name='aaa_1_mins' id='aaa_1_mins' value='' min='0' max='45' step='15' /></td> <td><input type='text' class='task totalhrs' name='aaa_1_totalhrs' id='aaa_1_totalhrs' value='' min='0' readonly /></td> </tr> <tr> <td><input type='number' class='task days' name='bbb_2_days' id='bbb_2_days' value='' min='0' /></td> <td><input type='number' class='task hrs' name='bbb_2_hrs' id='bbb_2_hrs' value='' min='0' /></td> <td><input type='number' class='task mins' name='bbb_2_mins' id='bbb_2_mins' value='' min='0' max='45' step='15' /></td> <td><input type='text' class='task totalhrs' name='bbb_2_totalhrs' id='bbb_2_totalhrs' value='' min='0' readonly /></td> </tr> </table>

使用 jQuery Ajax 计算每个表行

问题描述

1 个解决方案

解决方案1
0 2021-04-02 05:50:56

使用 jQuery Ajax 计算每个表行

问题描述

1 个解决方案

解决方案1 0 2021-04-02 05:50:56

解决方案1
0 2021-04-02 05:50:56