jQuery - 将输入值更改为复选框并选中

Question

我写了一个日程表函数，你可以输入你的名字和查看天数，它会动态添加到规则表中。我还添加了一个按钮来更改您的输入值并保存。但是现在，我只能编辑“名称”值，如果我单击编辑按钮，是否可以将日期更改为复选框？如果我第一次单击星期一，然后单击编辑按钮，则日期会动态显示“Sun Mon Tue Wed Thu Fri Sat”，并选中星期一的复选框，如果我单击其他日期，则将其保存。

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

html部分：

<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 部分：

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

是的，试着把它放在你的代码中：

$('#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';
  });*/
});

已更新保存处理程序

添加myRows类：

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

而 js 将是：

$('#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>');
});

见DEMO。