堆栈内存溢出
  简体   繁体   English

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

[英]How to add a unique ID on date by adding a table row

 原文  2019-05-03 08:48:23  1   2    javascript/ php/ html

问题描述

How can i add a unique ID to the date. 如何为日期添加唯一的ID。 Basically I want to add a unique ID on date to be unique, and by clicking the add row button of the table it create a new record then will generate a new date that contains with new unique ID. 基本上，我想在日期上添加唯一ID以使其唯一，然后单击表的添加行按钮，它会创建一个新记录，然后将生成一个包含新的唯一ID的新日期。

So basically the actual result is that by clicking the add row button it will create another row the contains with new dates. 因此，基本上，实际结果是，通过单击添加行按钮，它将创建包含新日期的包含行。 If there is anyone could help it really much appreciated. 如果有人可以帮助的话，我们将不胜感激。 

<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>

this is my function in adding the row. 这是我添加行的功能。 

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);
}

This is my date, im using daterangepicker. 这是我的约会，即时通讯使用daterangepicker。 

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

So basically the actual result is that by clicking the addrow button it will create another row the contains with new dates. 因此，基本上实际的结果是，通过单击“添加”按钮，它将创建包含新日期的包含内容的另一行。 If there is anyone could help it really much appreciated. 如果有人可以帮助的话，我们将不胜感激。

2 个解决方案

解决方案1
 0 已采纳  2019-05-03 10:13:57

Try this :- 尝试这个 ：- 

<!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>

解决方案2
 -1  2019-05-03 09:19:35

Try closing your tr tag before appending the columns (td's) to it 尝试在添加列（td）之前关闭tr标签 

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

        var newRow = $("<tr id='tr_"+count_length+"' class='tbl_adj'></tr>");
        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);
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在表中添加n个具有唯一元素id的删除行 - adding n removing row in table with unique id of elements 在jQuery中向表中添加新行，但将唯一ID应用于输入名称 - Adding a new row to a table in jQuery but apply unique ID to input names 向每行添加唯一的ID以根据列值隐藏/显示表行-Laravel-javascript - Adding unique id to each row to hide/show table row based on column value - Laravel - javascript 如何为显示代码表中的行赋予唯一的行ID？ - How to give unique row id to rows in display tag table? 通过唯一ID添加/显示每一行 - Add/show each row by unique ID 删除具有唯一按钮ID的对应表行 - Delete corresponding table row with unique button id 如何在jquery中给定的id之后添加表行 - how to add the table row after the given id in jquery 如何使用jQuery向表中添加新行，并为其增加增量ID - How to use jQuery to add a new row to a table, and assgin an incrementing id to it 在JavaScript中向HTML表格行添加ID - Adding id to html table row in JavaScript 如何在不添加到第一个表的情况下将表行独占地添加到第二个表 - How to ADD Table Row to the 2nd table exclusively without adding to the 1st table
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM