碼上快樂

相關內容    簡體    繁體

jquery動態添加刪除一行數據示例

本文轉載自   查看原文   2020-06-05 10:16   664    js 
 
<html> 
<head> 
<title>添加、刪除一行</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#addOneRow").click(function() { 
var tempTr = $("tr:first").clone(true); 
$("tr:last").after(tempTr); 
$("tr:last > td > #name").val("");//新添加行name為空 
$("tr:last > td > #address").val("");//新添加行address為空 
}); 
$(".delOneRow").click(function() { 
if ($("tr").length < 2) { 
alert("至少保留一行!"); 
} else { 
if (confirm("確認刪除?")) { 
$(this).parent().parent().remove(); 
} 
} 
}); 
}); 
</script> 
</head> 

<body> 
<table border="1"> 
<tr> 
<td>姓名:</td> 
<td><input type="text" id="name" name="name" /> 
</td> 
<td>地址:</td> 
<td><input type="text" id="address" name="address" /></td> 
<td><input type="button" class="delOneRow" value="刪除" /></td> 
</tr> 
</table> 
<input type="button" id="addOneRow" value="添加一行" /> 
</body> 

</html>

 

 

轉載：https://www.jb51.net/article/50954.htm

 

-------------------------------------------------------------------------------------------自己項目---------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

 

<include file="public@header" />
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li ><a href="{:url('machine/index')}">機器</a></li>
            <li ><a href="{:url('machine/list_machine')}">機台號列表</a></li>
            <li ><a href="{:url('machine/add_machine')}">新增機台號</a></li>
            <li ><a href="{:url('machine/set_machine')}">設置機台號</a></li>
            <li ><a href="{:url('machine/machine_status')}">機器運行狀態</a></li>
            <li ><a href="{:url('machine/consumption_code_list')}">消費碼列表</a></li>
            <li ><a href="{:url('machine/consumption_code_add')}">增加消費碼</a></li>
            <li ><a href="{:url('machine/cargo_way_list')}">機器貨道模板列表</a></li>
            <li class="active"><a href="{:url('machine/cargo_way_add')}">機器貨道模板添加</a></li>
            <li><a href="{:url('machine/cargo_way_template')}">批量機器貨道模板</a></li>
    </ul>
    
       <form class=" well form-inline margin-top-20" method="get" action="{:url('product/index')}">
        填寫貨道信息:
        
         <br>
           <span style="color: red;">貨道總數：</span>
           <span  style="color: red;font-size: 50px;">90</span> &nbsp;
           <span  style="color: red;">現有庫存：</span>
           <span  style="color: red;font-size: 50px">54</span> &nbsp;
           <span  style="color: red;">缺貨數量：</span>
           <span  style="color: red;font-size: 50px;"> 36</span>
   
    <div class="clone">
        
        <table class="table table-hover table-bordered margin-top-20">
        <tbody>
            <tr>
             <td >
                 
                     <div style="width: 40px;height: 114px;float: left;text-align: center;line-height: 114px;"><span >1</span></div>
                 
                    <div style="width: 57px;height: 114px;float: left;text-align: center;line-height: 114px;"><span >貨道號：</span></div>
                 
                    <div style="width: 100px;height: 114px;float: left;">
                        <span>
                            <input type="text" name="" value="第1層第1個" style="width: 100px;margin: 46px auto;">
                        </span>
                    </div>
                 
                    <div style="width: 42px;height: 114px;float: left;text-align: center;line-height: 114px; margin-left: 9px;"><span >庫存：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                   <div style="width: 53px;height: 114px;float: left;text-align: center;line-height: 114px;">
                      <span style="color: red;">*必填項</span>
                   </div>
                 
                    <div style="width: 193px;height: 114px;float: left;margin-left: 14px;">
                        <div>產品：<span style="color: red">利群(藍天)</span></div>
                        <div><img src="http://yh.shj.com/upload/admin/20200603/544f928cf5469a5253f881f481343ced.png" style="width: 50px;height: 50px;margin: 5px 26px;" onclick="enlarge_img('http://yh.shj.com/upload/admin/20200603/544f928cf5469a5253f881f481343ced.png')" ></div>
                        <div>指令：<input type="text" name="" value="02" style="width: 100px;"></div>
                    </div>
                 
                   <div style="width:100px;height: 114px;float: left">
                       <span >
                       <button type="button" style="width: 100px;margin: 46px auto;" class="btn-info" onclick="open_product(1)">選擇</button>
                   </span>
                   </div>
                 
                 <div style="width: 42px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 13px;"><span >排序：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                  <div style="width: 124px;height: 114px;float: left;text-align: center;line-height: 114px;">
                      <span >(數字從小到大顯示)</span>
                   </div>
                 
                 
                 <div style="width: 70px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 13px;"><span >庫存預警：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                 
                 <div style="width: 120px;height: 114px;float: left;margin-left: 20px;">
                        <div style="margin-top: 8px;">銷售價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>游戲價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>成本價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>促銷價：<input type="text" name="" value="02" style="width: 50px;"></div>
                   
                    </div>
                 
                   <div style="width: 80px;height: 114px;float: left">
                        <span>
                              <select name="product_id"  style="width: 80px;margin: 46px auto;">
                                    <option value="2" >游戲購 </option>
                                    <option value="2" >幸運購 </option>
                                 </select>
                        </span>
                    </div>
                 
                 
                 <div style="width: 75px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 12px;"><span >貨道容量：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="10" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                 
                 <div style="width:87px;height: 114px;float: left;margin-left: 34px;">
                        <div style="margin-top: 30px;"><button type="button" style="width: 87px;" class="btn-primary">保存</button></div>
                        <div><button type="button" style="width: 87px;margin-top: 5px;" class="btn-primary">碼</button></div>
                      
                   
                    </div>
                 
                   <div style="width:87px;height: 114px;float: left;margin-left: 8px;">
                        <div style="margin-top: 30px;"><button type="button" style="width: 87px;" class="btn-primary">刪除</button></div>
                        <div><button type="button" class="btn-primary" style="width: 87px;margin-top: 5px;">獎</button></div>
                      
                   
                    </div>
                 
              </td>
            </tr>
        </tbody>
    </table>
    <div style="background-color: #646464;height: 5px;"></div>
    
    </div>
        
    
      
        <div class="clone">
        
        <table class="table table-hover table-bordered margin-top-20">
        <tbody>
            <tr>
             <td >
                 
                     <div style="width: 40px;height: 114px;float: left;text-align: center;line-height: 114px;"><span >1</span></div>
                 
                    <div style="width: 57px;height: 114px;float: left;text-align: center;line-height: 114px;"><span >貨道號：</span></div>
                 
                    <div style="width: 100px;height: 114px;float: left;">
                        <span>
                            <input type="text" name="" value="第1層第1個" style="width: 100px;margin: 46px auto;">
                        </span>
                    </div>
                 
                    <div style="width: 42px;height: 114px;float: left;text-align: center;line-height: 114px; margin-left: 9px;"><span >庫存：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                   <div style="width: 53px;height: 114px;float: left;text-align: center;line-height: 114px;">
                      <span style="color: red;">*必填項</span>
                   </div>
                 
                    <div style="width: 193px;height: 114px;float: left;margin-left: 14px;">
                        <div>產品：<span style="color: red">利群(藍天)</span></div>
                        <div><img src="http://yh.shj.com/upload/admin/20200603/544f928cf5469a5253f881f481343ced.png" style="width: 50px;height: 50px;margin: 5px 26px;" onclick="enlarge_img('http://yh.shj.com/upload/admin/20200603/544f928cf5469a5253f881f481343ced.png')" ></div>
                        <div>指令：<input type="text" name="" value="02" style="width: 100px;"></div>
                    </div>
                 
                   <div style="width:100px;height: 114px;float: left">
                       <span >
                       <button type="button" style="width: 100px;margin: 46px auto;" class="btn-info">選擇</button>
                   </span>
                   </div>
                 
                 <div style="width: 42px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 13px;"><span >排序：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                  <div style="width: 124px;height: 114px;float: left;text-align: center;line-height: 114px;">
                      <span >(數字從小到大顯示)</span>
                   </div>
                 
                 
                 <div style="width: 70px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 13px;"><span >庫存預警：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="0" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                 
                 <div style="width: 120px;height: 114px;float: left;margin-left: 20px;">
                        <div style="margin-top: 8px;">銷售價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>游戲價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>成本價：<input type="text" name="" value="02" style="width: 50px;"></div>
                        <div>促銷價：<input type="text" name="" value="02" style="width: 50px;"></div>
                   
                    </div>
                 
                   <div style="width: 80px;height: 114px;float: left">
                        <span>
                              <select name="product_id"  style="width: 80px;margin: 46px auto;">
                                    <option value="2" >游戲購 </option>
                                    <option value="2" >幸運購 </option>
                                 </select>
                        </span>
                    </div>
                 
                 
                 <div style="width: 75px;height: 114px;float: left;text-align: center;line-height: 114px;margin-left: 12px;"><span >貨道容量：</span></div>
                 
                    <div style="width: 40px;height: 114px;float: left">
                        <span>
                            <input type="text" name="" value="10" style="width: 40px;margin: 46px auto;">
                        </span>
                    </div>
                 
                 
                 <div style="width:87px;height: 114px;float: left;margin-left: 34px;">
                        <div style="margin-top: 30px;"><button type="button" style="width: 87px;" class="btn-primary">保存</button></div>
                        <div><button type="button" style="width: 87px;margin-top: 5px;" class="btn-primary">碼</button></div>
                      
                   
                    </div>
                 
                   <div style="width:87px;height: 114px;float: left;margin-left: 8px;">
                        <div style="margin-top: 30px;"><button type="button" style="width: 87px;" class="btn-primary">刪除</button></div>
                        <div><button type="button" class="btn-primary" style="width: 87px;margin-top: 5px;">獎</button></div>
                      
                   
                    </div>
                 
              </td>
            </tr>
        </tbody>
    </table>
    <div style="background-color: #646464;height: 5px;"></div>
    
    </div>
    
      
      
      
 </form>
    
     <button type="button" class="btn btn-primary" id="addOneRow">添加一個通道</button>
</div>
<script src="__STATIC__/js/admin.js"></script>




<script>
    
    //添加一個通道
    $(function() {
        $("#addOneRow").click(function() {
            var tempTr = $("tr:first").clone(true);
            $("tr:last").after(tempTr);
            $("tr:last > td > #name").val("");//新添加行name為空
            $("tr:last > td > #address").val("");//新添加行address為空
        });

        $(".delOneRow").click(function() {
            if ($("tr").length < 2) {
                alert("至少保留一行!");
            } else {
                if (confirm("確認刪除?")) {
                    $(this).parent().parent().remove();
                }
            }
        });
    });
    
    
    
    
   function class_del(id) {
      
        layer.confirm('是否刪除？', {
            btn: ['是','取消'] //按鈕
        }, function(){

            $.ajax({
                type: 'post',
                url: "{:url('product/del')}",
                data: {id:id},
                dataType: 'json',
                success: function (data) {

                   // console.log(data);
                    //layer.msg(data);
                    if (data.code == 200) {
                        //  $(obj).parents("tr").remove();
                        layer.msg(data.msg, {icon: 1, time: 1000},function () {
                            window.location.reload();
                        });

                    } else {
                        layer.msg(data.msg, {icon: 2, time: 3000},function () {
                            window.location.reload();
                        });
                    }
                },
                error: function (data) {
                    console.log(data.msg,function () {
                        window.location.reload();
                    });
                },
            });
            
           // layer.msg('刪除成功', {icon: 1});
        });
    }
    
    
    
    //圖片放大
  function enlarge_img(img) {
       layer.open({
           type: 1,
           title: false,
           closeBtn: 0,
           area: ['auto'],
           skin: 'layui-layer-nobg', //沒有背景色
           shadeClose: true,
           content: '<img class="layui-upload-img" id="demo1" src="'+img+'" style="width: 100%;height: 100%;">'
       });
   }
   
   
   //選擇按鈕--選擇商品
    function open_product(id) {
        $.ajax({
            type:'post',
            url:"{:url('machine/open_product')}",
            data:{id:id},
            success:function (res) {

                if (res.code == 200) {


                    layer.open({
                        type: 2,
                        title: '選擇產品',
                        area: ['1000px', '700px'],
                        anim: 2,
                        id: 'LAY_layuipro' ,//設定一個id，防止重復彈出
                        content: [res.data], //iframe的url，no代表不顯示滾動條
                        maxmin: true,
                        shadeClose: true,
                        shade: false,
                       
                    });



                } else {
                    layer.msg('失敗', {icon: 2, time: 1000});
                }
            }
        })
    }
   
</script>
</body>
</html>

 

 

jquery中獲取一個div中有多少個子div

$(".div>div").length


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 利用jquery動態添加和刪除表格的一行，並且保存單行數據 jquery：添加復制按鈕 復制一行數據 利用jquery給指定的table動態添加一行、刪除一行 利用jquery給指定的table動態添加一行、刪除一行 Jquery動態添加多行，返回數據至每一行中 DataGrid 刪除一行數據 jquery獲取表格每一行數據 給DataTable中添加一行數據 Jquery 實現表格動態增加一行，刪除一行 動態表單添加一行，刪除一行
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM