Question

如何为日期添加唯一的ID。基本上，我想在日期上添加一个唯一ID以使其唯一，然后单击表的“添加行”按钮以创建一个新记录，然后将生成一个包含新的唯一ID的新日期。

因此，基本上，实际结果是，通过单击添加行按钮，它将创建包含新日期的包含内容的另一行。如果有任何人可以帮助的话，我们将不胜感激。

<table class="table table-bordered" id="adj_table">
<thead>
    <tr>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    <tr class="tbl_adj">
        <td>
            <div class="form-group input-group">                 
                <input type="text" class="form-control input-sm" id="adj_date">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="1" style="text-align: left;">
            <button class="btn btn-danger btn-block btn-sm" onclick="addTableRows()">Add Row</button>
        </td>
    </tr>
</tfoot>

这是我添加行的功能。

function addTableRows(){
    var count = $('#adj_table >tbody >tr').length;
    var count_length = count + 1;

        var newRow = $("<tr id='tr_"+count_length+"' class='tbl_adj'>");
        var column = "";

        column += '<td><input type="text" class="form-control input-sm"></td>';
        column += '<td><input type="text" class="form-control input-sm"></td>';
        column += '<td><input type="text" class="form-control input-sm"></td>';

        newRow.append(column);
        $("#adj_table").append(newRow);
}

这是我的约会，我使用daterangepicker。

$('#adj_date').daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});

因此，基本上实际的结果是，通过单击添加按钮，它将创建包含新日期的包含内容的另一行。如果有任何人可以帮助的话，我们将不胜感激。

Answer 1

尝试一下：-

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
    <table class="table table-bordered" id="adj_table">
        <thead>
            <tr>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr class="tbl_adj">
                <td>
                    <div class="form-group input-group">                 
                        <input type="text" class="form-control input-sm adj_date" id="adj_date1">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="1" style="text-align: left;">
                    <button class="btn btn-danger btn-block btn-sm" onclick="addTableRows()">Add Row</button>
                </td>
            </tr>
        </tfoot>
</body>
</html>
<script>
    function addTableRows(){
        var count = $('#adj_table >tbody >tr').length;
        var count_length = count + 1;

            var newRow = $("<tr id='tr_"+count_length+"' class='tbl_adj'>");
            var column = "";


            //generate random date between start_date and end_date
            var randomDate1 = randomDate(new Date(2019, 0, 1), new Date());  

            //generate  random date without range
            //var randomDate1 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');
            var randomDate2 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');
            var randomDate3 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');


            column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate1 +'"></td>';
            column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate2 +'"></td>';
            column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate3 +'"></td>';

            newRow.append(column);
            $("#adj_table").append(newRow);
    }

    $('.adj_date').daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});

    $('body').on('focus',".adj_date", function(){
        $(this).daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});
    });

    //generate random date between start_date and end_date
    function randomDate(start, end) {
        return moment(new Date(+(start.getTime()) - Math.floor(Math.random()* (end.getTime() - start.getTime()) ))).format('MM/DD/YYYY');
    }
</script>

Answer 2

尝试在将列（td）附加到它之前关闭tr标记

xmlString.trim().replace("\n", "").replaceAll("( *)<", "<")

如何通过添加表行在日期上添加唯一ID

2 个答案: