how to add edit and delete rows of a html table with javascript

Solutions on MaxInterview for how to add edit and delete rows of a html table with javascript by the best coders in the world

showing results for - "how to add edit and delete rows of a html table with javascript"
Todd
19 Jun 2019
1qmjqe
2qmj
3qjrw
4\qkrlq
5kqlrk
6kqkrql
7qkrlq
8
Bradwin
08 Jun 2020
1<!DOCTYPE html>
2<html>
3<head>
4<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
5  <meta charset="utf-8">
6  <title>Example</title>
7</head>
8<body>
9  <table>
10    <thead>
11      <tr>
12        <th>Quantity</th>
13        <th>Price</th>
14        <th>Total</th>
15      </tr>
16    </thead>
17    <tbody>
18      <tr>
19        <td><input type="text" class="qty"></td>
20        <td><input type="text" class="price"></td>
21        <td><input type="text" class="total" disabled></td>
22      </tr>
23      <!-- ...and so on... -->
24    </tbody>
25  </table>
26<script>
27  (function() {
28    "use strict";
29
30    $("table").on("change", "input", function() {
31      var row = $(this).closest("tr");
32      var qty = parseFloat(row.find(".qty").val());
33      var price = parseFloat(row.find(".price").val());
34      var total = qty * price;
35      row.find(".total").val(isNaN(total) ? "" : total);
36    });
37  })();
38</script>
39</body>
40</html>