jQuery - change input value to checkbox and checked

Question

I wrote a schedule function, you can type your name and check days, it will dynamically add to the rule table. And I also added an button to change your input values and save. But now, I can only edit "Name" values, is it possible to change days to checkbox, if I click edit button? If I clicked Monday at the first time, and then clicked the edit button, the days dynamically show "Sun Mon Tue Wed Thu Fri Sat" with the checkboxes with Monday checked, and save it if I clicked another days.

jsfiddle http://jsfiddle.net/51d0u7mz/3/

html part:

<div>
    <label>Type Your Name</label>
    <div>
        <input id="name" type="text" maxlength="20">
    </div>
</div>
<div>
    <label></label>
    <div>
        <table id="Date">
            <tbody>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
                <tr>
                    <td><input name="Sunday" type="checkbox" value="0"></td>
                    <td><input name="Monday" type="checkbox" value="1"></td>
                    <td><input name="Tuesday" type="checkbox" value="2"></td>
                    <td><input name="Wednesday" type="checkbox" value="3"></td>
                    <td><input name="Thursday" type="checkbox" value="4"></td>
                    <td><input name="Friday" type="checkbox" value="5"></td>
                    <td><input name="Saturday" type="checkbox" value="6"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
    <tbody>
        <tr>
            <th>Rules</th>
        </tr>
    </tbody>
</table>

jQuery part:

var rowNum = 0;
var dateVals = [];

$('#add').click(function() {
    var Name = $('#name').val();
    var dateVals = [];
    $('#Date :checked').each(function () {
        dateVals.push($(this).attr('name'));
    });
    rowNum ++;

    var row = '<tr id="row' + rowNum + '">'
            + '<td class="rowName">' + Name + '</td>&nbsp;&nbsp;&nbsp;&nbsp;'
            + '<td class="rowDate">' + dateVals + '</td>'
            + '<td><div><button type="button" class="edit">Edit</button></div></td>'
            + '</tr>';

    $(row).insertAfter($("#form > tbody > tr:last"));
    $('#name').val('');
    $('#Date :checked').removeAttr('checked');
});

$('#form').on('click','.edit',function() {
    var $row = $(this).closest('tr');
    $('.rowName',$row).each(function() {
        if ($(this).find('input').length) {
            $(this).text($(this).find('input').val());
        }
        else {
            var t = $(this).text();
            $(this).html($('<input maxlength="20" />',{'value' : t}).val(t));
        }
    });

    $(this).text(function(_, val){
        return val == 'Save' ? 'Edit' : 'Save';
    });
});

Answer 1

Yes, try put this inside your code :

$('#form').on('click','.edit',function() {
  var $row = $(this).closest('tr');
  $('.rowName',$row).each(function() {
    if ($(this).find('input').length) {
        $(this).text($(this).find('input').val());
    }
    else {
        var t = $(this).text();
        $(this).html($('<input maxlength="20" />',{'value' : t}).val(t));
    }
  });

 // <---------- here
  var rowDate = $row.find('.rowDate');
  var days = rowDate.text().split(',');
  rowDate.html($('#Date').clone());
  rowDate.find(':checkbox').each(function(){
    if ( $.inArray($(this).attr('name'), days) !== -1 ) {
        $(this).prop('checked', true);
    }
  });
 // <----- end here
  $(this).replaceWith('<button type="button" class="save">Save</button>');
  /*$(this).text(function(_, val){
    return val == 'Save' ? 'Edit' : 'Save';
  });*/
});

Updated for save handler

added myRows class:

var row = '<tr id="row' + rowNum + '" class="myRows">'.....

And js would be :

$('#form').on('click','.save',function() {
  var parent = $(this).closest('.myRows'); //<-- use myClass instead
  var rowDate = parent.find('.rowDate');
  var days = rowDate.find(':checkbox:checked').map(function(){
    return this.name
  }).get().join(',');
  rowDate.empty().text(days);
  parent.find('.rowName').text(parent.find('.rowName input').val());
  $(this).replaceWith('<button type="button" class="edit">Edit</button>');
});

See DEMO.