Question

我有一个＆＃34;添加＆＃34;单击按钮上的按钮，它将添加两个带弹出日历和单选按钮的文本框。我需要的是在填充文本框并单击“提交”按钮后，它应该以表格的形式在文本框上方显示填充的数据，其中包含列开始日期和 enddate 使用删除选项从列中删除日期。如果可能，任何人都可以提供一个例子提前致谢编辑：无论选择哪个无线电，只应将该行保存在表格中

以下代码添加了div和弹出日历

$(document).ready(function () {

    $(".datepicker").each(function () {
        $(this).datepicker();
    });

    $("#btnAddAddress").click(function () {

        $(".container").show();
        $(".container").append('<table> <tr> <td> <label ID="lblStartDate">Start   Date </label> </td> <td> <input type="text"  class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" class="datepicker"/> </td> <td><input type="radio" /></td></tr></table>');
        $(".datepicker").datepicker();

    });

});

添加按钮

<div class="AAA">
    <input type="button" id="btnAddAddress" name="btnAddAddress" value="Add" />
    <div class="container"></div>
</div>

提交按钮

<div class="submit">
    <input type="button" value="submit" />
</div>

请看这里：http://jsfiddle.net/saranyasaint/ksjn7ko7/

Answer 1

在这里 - DEMO

$('.btnsubmit').on('click',function(){
   if($('table').length)
   {
        var radio=$('input[type="radio"]:checked');
        var stDate=$(radio).closest('table').find('.datepicker:first').val();
        var edDate=$(radio).closest('table').find('.datepicker:last').val();
        var html="<tr><td> "+stDate+"</td><td>"+edDate+"</td><td><a href='#' class='rmv'>Remove</a>";
        //$('.tbl').append(html);//Use append if you want to append data to table
        $('.tbl').html(html);//Replace exisiting content and add new one
    }
    else
        alert('add data please');  
})

$(document).on('click','.rmv',function(){
    $(this).closest('tr').remove(); 
});

<强>更新

<强> DEMO

$('.btnsubmit').on('click',function(){
        if($('table').length)
        {
            var radio=$('input[type="radio"]:checked');
            var stDate=$(radio).closest('table').find('.datepicker:first').val();
            var edDate=$(radio).closest('table').find('.datepicker:last').val();
            var car=$("#yourselectid option:selected").text()
            var html="<tr><td> "+stDate+"</td><td>"+edDate+"</td><td>"+car+"</td><td><a href='#' class='rmv'>Remove</a>";
            //$('.tbl').append(html);//Use append to append to table
            $('.tbl').html(html);//Replace exisiting content and add new one
        }
        else
            alert('add data please');  
})

注意 - 我已经跳过了您可能需要做的一些验证

Answer 2

此小提琴有效，请参阅此处http://jsfiddle.net/ksjn7ko7/14/或试用以下代码段。

使用“添加”按钮添加新日期，“提交”按钮，然后将输入字段转换为纯文本，并使“删除”按钮可见。 “删除”按钮将删除未检查的所有行。如果你想要“无线电功能”工作，无线电输入字段都需要具有相同的名称，即。即只能检查其中一个。否则你应该使用一个复选框。

$(document).ready(function () {
  $('#sbmt').click(function(){
   $('#btnAddAddress,#sbmt').hide();$('#dlt').show();
   $('.container input[type=text]')
       .each(function(){$(this).replaceWith($(this).val());}); 
  });
  $('#dlt').click(function(){
   $('.container tr').has('input:not(:checked)').remove();
  })
  $("#btnAddAddress").click(function () {
    $(".container,#sbmt").show();
    $(".container").append('<table> <tr> <td> <label ID="lblStartDate">Start Date </label> </td> <td> <input type="text"  class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" class="datepicker"/> </td> <td><input type="radio" name="rdb"/></td></tr></table>');
        
    $(".datepicker").datepicker();
  });
});

#dlt,#sbmt {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="AAA">
<input type="button" id="btnAddAddress" name="btnAddAddress" value="Add"  /> 
<input type="button" value="submit" id="sbmt"/>
<input type="button" value="delete unchecked dates" id="dlt"/>
</div>
<div class="container"></div>

如何在表格的texbox中显示数据？

2 个答案: