选中复选框时在表中添加 Textfieds 使用 Jquery

Posted 2023-05-09

【中文标题】选中复选框时在表中添加 Textfieds 使用 Jquery

【英文标题】：Add Textfieds in table when checkbox checked Using Jquery

【发布时间】：2020-09-13 02:39:00

【问题描述】：

我有参数列表和复选框，我可以在其中搜索和选择表中所需的参数。现在我想为选定的参数设置值。为此，我创建了表格格式的文本字段（参数名称、数据类型、设置值） .当我选择参数表中的复选框时，表中的文本字段应使用选定的参数创建。当我取消选择复选框时，文本字段应该被删除。例如，如果我从参数表中选择一个参数“TestingDevice”，则应使用“TestingDevice”创建文本字段值，而其他数据类型和设置值应由用户手动输入。在我正在使用的代码下方。

参数列表

<div class="tab-content">
       <div id="Device_B" class="tab-pane fade in active">
         <div class="col-md-12">
          <div class="col-md-6" style="overflow: auto">
          <br>
          <input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search &#x1F50D; :">
            <br>
          <h4>All Parameters</h4>
          <div class="span5 border-0" style="overflow: auto">    
          <table id="customGroupAddParamTable" class="table table-bordered">
            <thead>
            <tr class="info">
              <th style="width: 10px;">
                <input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
              <th>Parameter Name</th>
            </tr>
            </thead>
            <tbody class="parameter_table">
            <% @all_br_parameters.each do |parameter| %>
              <tr id="tr_rb_<%=parameter['id'] %>">
                <td>
                  <input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
                </td>
                <td style="word-break:break-all;">
                  <%= parameter['parameter_name']%>
                </td>
              </tr>
            <% end %>
            </tbody>
          </table>
         </div>
         </div>

文本字段表格

<div class="tab-content" >
        <div id="protocol" class="tab-pane fade in active">
        <div class="span3 border-0" style="overflow: scroll"> 
        <table id="addParamTable" class="table table-bordered">
        <thead>
        <tr class="info">
          <th>Parameter Name</th>
          <th>Data Type</th>
          <th>Expected Set Value</th>

        </tr>
        </thead>
        <tbody class="parameter_table">
        <tr>
            <td>
              <input type="text" id="parameterName" class="parameterName" name="parameter_name">
            </td>
            <td>
              <input type="text" class="parameterDscription" name="parameter_description">
            </td>
            <td>
              <input type="text" class="expectedValue" name="expected_value">
            </td>
          </tr>
          </tbody>
      </table>

【参考方案1】：

试试这个：这就是我的处理方式。

  $(document).ready(function() 
        window.addEventListener('load', (event) => 
            checkbox = document.getElementById("checkbox_to_be_evaluated");
            textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
            evaluateCheckbox(checkbox, textbox);
        );

        $(checkbox).click(function()
            evaluateCheckbox(checkbox, textbox)
        );

        function evaluateCheckbox(checkbox, textbox) 
            //take in element of checkbox
            if(checkbox.checked)
                textbox.style.display = "block";
            else 
                textbox.style.display = "none";
            
            //handle accordingly
        ;
    );

【讨论】：

Thanks.How 将选定的表列值放置到文本字段？我有一百个数据表。如果我从表中选择 50 个数据，需要创建 50 个文本字段以及相应的选定表数据？

@SubashiniRaja 如何使用 ajax 调用连接到服务器并使用返回的数据填充文本框 .value 属性？