动态表在选中FORM文本字段中的显示值以进行编辑时选中带有相关行的复选框，

Question

请协助。我想做的就是使用复选框，以便在“选中”时在字段中显示数据，以便用户进行编辑。

这是我的JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $(".add-row").click(function(){
        var OS = $("#OS").val();
        var vCPU = $("#vCPU").val();
        var Memory = $("#Memory").val();
        var Val = $("#Val").val();
        var Performance = $("#Performance").val();
        var HighWrite = $("#HighWrite").val();
        var markup 
        = "<tr><td><input class='checkEdit' type='checkbox' name='record'></td><td>" + OS + "</td><td>" + vCPU + "</td><td>" + Memory + "</td><td>" + Val + "</td><td>" + Performance + "</td><td>" + HighWrite + "</td></tr>";

        $("table tbody").append(markup);
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });

});    

当我填写表单字段并单击图像中的“添加”按钮时，将构建动态表。

表格预览

Answer 1

需要在复选框onclick='handleClick(this);'中添加点击事件，以输入所有数据。

在handleClick函数中是否需要根据复选框选中切换输入禁用。

$(document).ready(function(){
    $(".add-row").click(function(){
        var OS = $("#OS").val();
        var vCPU = $("#vCPU").val();
        var Memory = $("#Memory").val();
        var Val = $("#Val").val();
        var Performance = $("#Performance").val();
        var HighWrite = $("#HighWrite").val();
        vCPU =10;
        var markup 
        = "<tr><td><input class='checkEdit' type='checkbox' name='record'  onclick='handleClick(this);'></td><td>" +  "<input type='text' class='enable' name='vCPU' value="+vCPU+" readonly>" + "</td></tr>";
$("table tbody").append(markup);

        
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });

});

function handleClick(cb) {
    if(cb.checked){
      $(cb).parent().parent().find(".enable").each(function(){
      console.log($(this));
        $(this).prop('readonly', false);
      });
     }
    else{
        $(cb).parent().parent().find(".enable").each(function(){
        console.log($(this));
          $(this).prop('readonly', true);
      });
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tbody></tbody>
</table>

<button class="add-row">add</button>