在think PHP模板文件中使用JQuery动态添加文本输入框，后端think PHP

whatthinking

已于 2023-04-21 11:08:29 修改

阅读量376

点赞数

分类专栏： PHP 文章标签： jquery html php

于 2022-08-10 10:45:19 首次发布

本文链接：https://blog.csdn.net/whatthinking/article/details/126261625

版权

PHP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端：html、js、jquery，后端：php、thinkPHP

在前端网页中动态添加输入框，后端整理数据

1、前端HTML部分：

<table class="layui-table">
          <thead>
            <tr>
              <th>项目</th>
              <th>名称</th>
              <th>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" style="margin-right: 0;font-size:12px;" id="add_jscs_tr">添加</button>
              </th>
            </tr>
          </thead>
          <tbody id="jishucanshu_inputs">
            {notempty name="$data.jishucanshu"}
              {volist name="$data.jishucanshu" id='jscs1'}
              <tr class="del operate">
                <td><input type="text" name="jscs_one[]" {notempty name="$jscs1[0]"}value="{$jscs1[0]}"{/notempty}></td>
                <td><textarea id="symptomTxt" oninput="autoTextAreaHeight(this)" name="jscs_two[]">{notempty name="$jscs1[1]"}{$jscs1[1]}{/notempty}</textarea></td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-primary delete" style="margin-right: 0;font-size:12px;">删除</button>
                </td>
              </tr>
              {/volist}
            {/notempty}
          </tbody>
        </table>

2、前端js-jQuery部分

//添加输入框
    $('#add_jscs_tr').click(function() {
        var html='<tr class="del operate"><td><input type="text" name="jscs_one[]"></td>'+
                  '<td><textarea id="symptomTxt" oninput="autoTextAreaHeight(this)" name="jscs_two[]"></textarea></td>'+
                  '<td><button type="button" class="layui-btn layui-btn-xs layui-btn-primary delete" style="margin-right: 0;font-size:12px;">删除</button></td></tr>';
        $('#jishucanshu_inputs').append(html);
        //动态添加按钮，点击删除按钮,删除当前的元素
        $("body").on("click",".delete",function(){
          $(this).parent('td').parent('.operate').remove();
        });
        $(function () {
            var ele = document.getElementById("symptomTxt");
            autoTextAreaHeight(ele);
          });
      });

//添加按钮，点击删除按钮,删除当前的元素
      $("body").on("click",".delete",function(){
        $(this).parent('td').parent('.operate').remove();
      });

后端thinkphp-php代码：

/**
     * 将两个数组的每个元素以下标为准成对放入一维数组中
     * 输入:arr1[item][item][item];arr2[item][item][item]
     * 输出:[[item0,itme1][itme0,item1][itme0,item1]]
     */
    public function arr_two_to_one($arr1,$arr2)
    {
        if((!empty($arr1)&&!empty($arr2))
            &&(is_array($arr1)&&is_array($arr2))){
            $parts_arr=array();
            for ($i=0; $i <count($arr1);$i++) {
                $parts_arr[]=array($arr1[$i],$arr2[$i]);
            }
            return serialize($parts_arr);
        }
    }