js中clone的运用和clone后datepicker的显示问题

最新推荐文章于 2023-09-07 13:54:33 发布

原创最新推荐文章于 2023-09-07 13:54:33 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #datepicker #js中clone的运用和clone后da #javascript

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在使用clone操作时确保datepicker控件正常工作。通过一个具体示例，演示了如何实现行的增删，并解决新增行中datepicker无法正常使用的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们有时有这种需求,增加一行,减少一行.一般情况使用js中的clone()并不难.但是有时增加的行里有datepicker日期控件,不加处理会导致clone出的日期控件不可用,下面一一做出介绍.

clone和datepicker的运用实例:

下面结合小demo介绍下clone和datepicker的运用,一共分为3个步骤:

1.新建html文件,引入js文件(demo所用js文件下载地址http://pan.baidu.com/s/1i5hKZGT 包含jquery文件和datepicker控件文件)

<span style="font-size:14px;"><span style="font-size:14px;"></span><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./js/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    <script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.js"></script>
    <script type="text/javascript" src="./js/jquery.ui.datepicker-zh-TW.js"></script>
</head>
<body>
<table class="table table-hover" border="1px" style="margin-top: 20px">
    <span style="margin-top:10px;margin-left: 10px" >
        <input type="button" value="增加" class="addPosition"/>
        <input type="button" value="删除" class="reducePosition"/>
    </span>
    <thead>
    <th>品名</th>
    <th>最早失效日期</th>
    <th>最迟失效日期</th>
    </thead>
    <tbody class="table-tbody" id="append">
    <tr class="clone">
        <td><input type="text" class="sku" name="sku[]"/></td>
        <td><input type="text" class="begin_date" name="begin_date[]" readonly="readonly"/></td>
        <td><input type="text" class="end_date" name="end_date[]" readonly="readonly"/></td>
    </tr>
    </tbody>
</table>
</body>
</html></span>

2.点击新增clone一行,点击减少减少一行

$(".clone:eq(0)").clone(); 取得类为clone的第一个元素,也就是选择第一行,进行clone

 <span style="font-size:14px;">       $(function(){
            //新增按钮点击
            $('.addPosition').click(function(){
                var clone = $(".clone:eq(0)").clone();
                //清除复制的内容
                clone.find('input[type=text]').val(null);
                $("#append").append(clone);
//                $('.table > tbody > tr').eq(0).clone().appendTo('.table-tbody');
            });
            //删除按钮点击
            $('.reducePosition').click(function(){
                var $tr = $('.table > tbody > tr');
                if($tr.length>1){
                    $('.table > tbody > tr').last().remove();}
            });
        });</span>

$('.table > tbody > tr').last().remove(); //取得类名为table元素内部为tbody的内部为tr的元素,将其最后一个tr去掉

3.设置日期控件样式

<span style="font-size:14px;">        $(function(){
            $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' });
            $(".begin_date").datepicker({
            });
            $(".end_date").datepicker({
            });
        });</span>

dateFormat: 'yy-mm-dd' 设置样式为年-月-日

到此,日期控件,新增删除行可以使用.但是,第二行的datepicker控件不可用.通过debug断点发现,datepicker 对 input 控件会自动生成一个id,并添加了hasDatepicker样式.解决方案是clone后,要保证每次生成不同的id,并移除hasDatepicker样式.

<span style="font-size:14px;"> //初始化时间控件
clone.find(".begin_date").attr("id", ++$.datepicker.uuid).removeClass("hasDatepicker").datepicker();
clone.find(".end_date").attr("id", $.datepicker.uuid+=2).removeClass("hasDatepicker").datepicker();</span>

到此我们就解决了clone后datepicker的不显示问题.