javascript - 使用 jQuery 添加、更新、删除和显示表中的数据

Question

在表中动态添加数据并编辑，然后复选框值不会更新，这是问题。 在这里jsFiddle Code Here in JSFiddle

Answer 1

请查看工作片段。

var cnt = 0;
var count = 1;

function BindData(count) {
  $("#s_name").val($("#name_" + count).html());
  $("#product_names").val($("#pro_" + count).html());
  $("#emailid").val($("#email_" + count).html());
  $("#mobileno").val($("#mobi_" + count).html());
  $('input[name="are"]:checked').val($("#ur_" + count).html());
  $("#price").val($("#pric_" + count).html());
  $("#t_pro").val($("#totalPro_" + count).html());
  $("#total_price").val($("#totalPri_" + count).html());
  var checkedHTML = $("#productWith_" + count).html();
  var arrCheckedValues = checkedHTML.split(",");
  $('.ads_Checkbox').each(function() {
    var values = $(this).val();
    if (arrCheckedValues.indexOf(values) > -1) {
      $(this).prop("checked", true);
    }
  });
  $("#order").attr("value", "Update Order");
  $("#order").attr("onclick", "EditData(" + count + ")");

}

function EditData(count) {
  $("#name_" + count).html($("#s_name").val());
  $("#pro_" + count).html($("#product_names").val());
  $("#email_" + count).html($("#emailid").val());
  $("#mobi_" + count).html($("#mobileno").val());
  $("#ur_" + count).html($('input[name="are"]:checked').val());
  $("#pric_" + count).html($("#price").val());
  $("#totalPro_" + count).html($("#t_pro").val());
  $("#totalPri_" + count).html($("#total_price").val());
  var chk = '';
  var arrCheckedValues = [];
  $('.ads_Checkbox:checked').each(function() {
    var values = $(this).val();
    arrCheckedValues.push(values);
  });
  chk = arrCheckedValues.join(",");
  $("#productWith_" + count).html(chk);
  $("#order").attr("value", "Order");
  $("#order").attr("onclick", "AddData()");
  //AddData(); /// ADD NEW DATA 
  $("#s_name").val("");
  //$("#product_names").val("");
  $("#emailid").val("");
  $("#mobileno").val("");
  //$('input[name="are"]').prop("");
  $("#price").val("");
  $("#t_pro").val("");
  $("#total_price").val("");
  // Clear all CheckBoxes
  $('input[type=checkbox]').each(function() {
    this.checked = false;
  });
}


function AddData() {
  var shop_name = $("#s_name").val();
  var pro_name = $("#product_names").val();
  var email = $("#emailid").val();
  var mobi = $("#mobileno").val();
  var ur = $('input[name="are"]:checked').val();
  var pric = $("#price").val();
  var total_pro = $("#t_pro").val();
  var total_pri = $("#total_price").val();
  var chk = '';
  var arrCheckedValues = [];
  $('.ads_Checkbox:checked').each(function() {
    var values = $(this).val();
    arrCheckedValues.push(values);
    //chk += values;
  });
  chk = arrCheckedValues.join(",");
  $("#mytab").append('<tr><td id="name_' + count + '">' + shop_name + '</td><td id="pro_' + count + '">' + pro_name +
    '</td><td id="email_' + count + '">' + email + '</td><td id="mobi_' + count + '">' + mobi +
    '</td><td id="ur_' + count + '">' + ur + '</td><td id="pric_' + count + '">' + pric + '</td><td id="totalPro_' + count + '">' + total_pro + '</td><td id="totalPri_' + count + '">' + total_pri + '</td><td id="productWith_' + count + '">' + chk + '</td><td><button type="button" class="delete">Delete</button></td><td><button type="button" id="edit" onclick="BindData(' + count + ');" >Edit</button></td></tr>');
  cnt++;
  count++;
  $("#s_name").val("");
  //$("#product_names").val("");
  $("#emailid").val("");
  $("#mobileno").val("");
  //$('input[name="are"]').val("");
  $("#price").val("");
  $("#t_pro").val("");
  $("#total_price").val("");
  // Clear all CheckBoxes
  $(".ads_Checkbox").prop("checked", false);
  /*$('input[type=checkbox]').each(function() 
  { 
          this.checked = false; 
  });*/
  if (cnt > 0) {
    $("#dummy").hide();
  }
}

$(document).ready(function() {
  $("#price,#t_pro").blur(function() {
    $('#total_price').val($('#price').val() * $('#t_pro').val());
  });
  $(document).on('click', '.delete', function() {
    //When delete the record then clear all checkboxes
    $('input[type=checkbox]').each(function() {
      this.checked = false;
    });
    var par = $(this).parent().parent(); //tr
    par.remove();
    cnt--;
    if (cnt == 0) {
      $("#dummy").show();
    }
  });
});

* {
  font-family: arial;
  font-size: 13px;
}

.align-center {
  text-align: center;
}

input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}

input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}

form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.9em;
}

form div label {
  float: left;
  width: 20%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table cellpadding="2" width="50%" align="center" cellspacing="2" id="myTable">
    <tr>
      <td colspan=2>
        <center>
          <font size=4>
            <b>Product Detail Form</b>
          </font>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <label for="s_name">Shop Name</label>
      </td>
      <td>
        <input type="text" id="s_name" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="product_names">Product Name</label>
      </td>
      <td>
        <select id="product_names" class="product_name">
                        <option value="-1" selected>select..</option>
                        <option value="pc">PC</option>
                        <option value="laptop">Laptop</option>
                        <option value="mobile_phone">Mobile Phone</option>
                        <option value="plasma_screen">Plasma Screen</option>
                    </select>
      </td>
    </tr>
    <tr>
      <td>
        <label for="emailid">EmailId</label>
      </td>
      <td>
        <input type="text" id="emailid" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="mobileno">MobileNo</label>
      </td>
      <td>
        <input type="text" id="mobileno" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="r1">What You Are</td>
                <td>
                    <input type="radio" name="are" value="Buyer" id="r1" size="10" checked>
                    <label for="r1">Buyer</label>
        <input type="radio" name="are" value="Seller" id="r2" size="10">
        <label for="r2">Seller</label>
      </td>
    </tr>
    <tr>
      <td>
        <label for="price">Price</label>
      </td>
      <td>
        <input type="text" id="price" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="t_pro">Total Product</label>
      </td>
      <td>
        <input type="text" id="t_pro" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="total_price">Total Price</label>
      </td>
      <td>
        <input type="text" id="total_price" size="30" class="txt">
      </td>
    </tr>
    <tr>
      <td>
        <label for="1">Product With:</td>
                <td>
                    <input type="checkbox" name="chk1" id="chk1" class="ads_Checkbox" value="Box">Box
                    <br>
                    <input type="checkbox" name="chk2" id="chk2" class="ads_Checkbox" value="Bill">Bill
                    <br>
                    <input type="checkbox" name="chk3" id="chk3" class="ads_Checkbox" value="Bill-BOx">Bill-BOx
                    <br>
                    <input type="checkbox" name="chk4" id="chk4" class="ads_Checkbox" value="Only Product">Only Product
                </td>
            </tr>
            <tr>
                <td colspan="2" class="align-center">
                    <input type="reset">
                    <input type="button" id="order" value="Order" onclick="AddData()" />
                </td>
            </tr>
        </table>
    </form>
    <table cellpadding="4" width="50%" align="center" cellspacing="4" id="mytab" border="1">
        <tr>
            <th>ShopNmae</th>
            <th>Product Name</th>
            <th>EmailId</th>
            <th>MobileNo</th>
            <th>What You Are</th>
            <th>Price</th>
            <th>Total Product</th>
            <th>Total Price</th>
            <th>Product With</th>
            <th colspan="2">Action</th>
        </tr>
        <tr id="dummy">
            <td colspan="11">No data</td>
        </tr>
    </table>