时间戳

首页 > 解决方案 > 动态表在 FORM 文本字段中选中显示值时单击关联行的复选框以进行编辑

javascript - 动态表在 FORM 文本字段中选中显示值时单击关联行的复选框以进行编辑

问题描述

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

这是我的 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();
            }
        });
    });

});

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

表格预览 在此处输入图像描述

标签： javascriptphphtml

解决方案

需要在复选框中添加单击事件以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>

推荐阅读