如何在表格的文本框中显示数据？

Question

单击按钮时我有一个“添加”按钮，它将添加两个带有弹出日历的文本框和一个单选按钮。我需要的是在填充文本框并单击提交按钮后，它应该以表格的形式在文本框上方显示填充的数据，其中包含 start date 和 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/ 或尝试以下代码 sn-p。

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

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