zoukankan      html  css  js  c++  java
  • html复制行删除行(带select标签中option选项的selected属性)

    这里遇到个有意思的

    第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多

    删除事件和复制事件要放在2个(function () 里面,不然unbind('click')的时候会使另外一个不可用

    $(function () {
    $("body").on("click", ".removeclass", function () {
    debugger;
    //var index = Number($(this).attr("data-index")) + 1
    $(this).parents("tr").remove();
    var Ida = $(this).parent().parent().find("input[name='Idls']").val()
    if (Ida != null) {
    var ids = ($("#delId").val() == "" ? "" : $("#delId").val() + ",") + Ida;
    $("#delId").val(ids)
    }
    x--;
    debugger;
    })
    })
    $(document).ready(function () {
    $("#SavePhy").validate();

    var MaxInputs = 30; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $(".AddMoreFileBox"); //Add button ID
    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added
    $(AddButton).click(function (e) //on add input button click
    {
    if (x <= MaxInputs) //max input box allowed
    {
    FieldCount++; //file box added increment
    //$(InputsWrapper).append('<tr class="profile-info-row"> <td class="profile-info-name" style="text-align: center"><select id="Physicalquantity_' + FieldCount + '" name="Physicalquantity" onchange="RefreshUnitTwo(' + FieldCount + ')" style="100px"> <option value="力(force)">力(force)</option> <option value="力(force)">力(force)</option> <option value="时间(time)">时间(time)</option> <option value="长度(length)">长度(length)</option> </select></td><td class="profile-info-name"> <input class="form-control" data-val="true" data-val-number="The field ActualData must be a number." id="ActualData_' + FieldCount + '" name="ActualData" placeholder="" type="text" value=""> </td> <td class="profile-info-name" style="text-align: center"><input class="form-control" data-val="true" data-val-number="The field adjustingData must be a number." id="adjustingData_' + FieldCount + '" name="adjustingData" placeholder="" type="text" value=""></td><td class="profile-info-name"> <select class="form-control" id="Unit_' + FieldCount + '" name="Unit"> </td> <td><a href="javascript:void(0)" class="removeclass"><i class=" ace-icon fa fa-trash-o red"></i></a></td></tr>');
    $(InputsWrapper).append('<tr class="profile-info-row"> <td class="profile-info-name" style="text-align: center"><input id="Idls" name="Idls" type="hidden" value="0"><select id="Physicalquantity" name="Physicalquantity" onchange="RefreshUnit(event)" style="150px" data-val="true" data-val-required="this is required."> @{ foreach (var p in phyList)
    { @Html.Raw("<option value="" + p.Value + "">" + p.Text + "</option>");
    }} </select></td><td class="profile-info-name"> <input class="form-control" data-val="true" data-val="true" data-val-required="this is required." data-val-number="The field ActualData must be a number." id="ActualData" name="ActualData" placeholder="" type="text" value="" style="130px" required> </td> <td class="profile-info-name" style="text-align: center"><input class="form-control" data-val="true" data-val-number="The field adjustingData must be a number." id="adjustingData" name="adjustingData" placeholder="" type="text" value="" style="130px"></td><td class="profile-info-name"> <select class="form-control" id="Unit" name="Unit" style="80px" onchange = "UnitSelect(event)"> </td> <td> <a href="javascript:void(0)" class="select_option">复制当前行</a> </td> <td><a href="javascript:void(0)" class="removeclass"><i class=" ace-icon fa fa-trash-o red"></i></a></td></tr>');
    x++; //file box increment
    }
    return false;
    });

    //$(document).on('click', ".removeclass", function (src) {
    // // if (x > 1) {
    // debugger;
    // $(this).parent().parent().remove();
    // var Ida = $(this).parent().parent().find("input[name='Idls']").val()
    // if (Ida != null) {
    // var ids = ($("#delId").val() == "" ? "" : $("#delId").val() + ",") + Ida;
    // $("#delId").val(ids)
    // }
    // x--;
    // debugger;
    // //}
    // return false;
    //})
    $('.select_option').off('click');
    $(document).unbind('click').on('click', ".select_option", function () { //这种写法第一次点击后,一切正常,关掉页面后第二次点击,竟然执行两次,以后越来越多
    // $(this).attr("data-index", index)
    debugger;
    var selvalueP = $(this).parents("tr").find("select[name='Physicalquantity']")[0].value;
    //alert($(this).parents("tr").find("select[name='Physicalquantity']").find("option[text='" + selvalueP + "']").length)
    for (var i = 0; i < $(this).parents("tr").find("select[name='Physicalquantity']")[0].length; i++) {
    $(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].removeAttribute("selected");
    }
    for (var i = 0; i < $(this).parents("tr").find("select[name='Physicalquantity']")[0].length; i++) {
    if ($(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].value == selvalueP) {
    $(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].setAttribute("selected", "true");
    break;
    }
    }
    var selvalue = $(this).parents("tr").find("select[name='Unit']")[0].value;
    for (var i = 0; i < $(this).parents("tr").find("select[name='Unit']")[0].length; i++) {
    if ($(this).parents("tr").find("select[name='Unit']")[0].options[i].value == selvalue) {
    $(this).parents("tr").find("select[name='Unit']")[0].options[i].setAttribute("selected", "true");
    break;
    }
    }
    var cloneobj = $(this).parents("tr").clone();
    $(cloneobj).find("input[name='Idls']").val("0");
    $(this).parents("tr").after(cloneobj);

    return false;
    })
    });

  • 相关阅读:
    mysql的sql性能分析器
    Maven(一)
    SVN使用(二)
    SVN使用(一)
    php smarty section使用
    php smarty foreach循环注意
    PHP unlink() 函数
    PHP file_exists() 函数
    PHP realpath() 函数
    PHP dirname() 函数
  • 原文地址:https://www.cnblogs.com/Depingblogs/p/14841105.html
Copyright © 2011-2022 走看看