多个相同的文本框，当点击某个文本框时，弹出编辑框（有保存提交按钮），编辑完成提交之后，怎么将

Question

多个相同的文本框，当点击某个文本框时，弹出编辑框（有保存提交按钮），编辑完成提交之后，怎么将当前这个编辑框内容返回给点击的那个文本框？

$('._ctDesc').click(function(){
        console.log($(this).val())
        var ctDescVal = $(this).val(); //将文本框的val值存在变量
//创建的模态框        
$("body").append("<div id='ctEditMask'></div><div class='ctEditBox'><div class='ctEditBoxTit'>编辑</div><div class='ctEditBoxCon'><input name='cust_idea' id='{$vo.sale_id}' class='ctEditBoxText' value='{$vo.cust_idea}' /></div><div class='ctEditBoxFoot'><button class='ctEditBoxConfirm'>确定</button></div></div>");
        $('.ctEditBoxText').focus()
        //提交事件
        $('.ctEditBoxConfirm').click(function(){
            var id = $('.ctEditBoxText').attr('id');
            var value = $('.ctEditBoxText').val();
            var name = $('.ctEditBoxText').attr('name');

            console.log(ctDescVal)
            ctDescVal = value  //将当前的value值赋给文本框
            $.ajax({
                url:"...（url没问题 可以忽略）",
                dataType:"json",
                type:"post",
                async:true,
                data:{sale_id:id,value:value,name:name},
                success:function(data){
                }
            })    
            $('#ctEditMask, .ctEditBox').remove();
            $('input[class="xianshi"], ._ctDesc').blur()
        })
    })

现在我就是点击确定提交之后，无法将我编辑框的内容返回给文本框了

Answer 1

无论你是哪种方式输出的这个列表，首先这个列表你可以给每一个需要填写的td>input一个标识，比如 td#item-xxx,或者给你的tr一个标识，这样子在你触发这一行的编辑按钮的时候，你能够通过标识找到你实际上是在填写那个内容。

看你的UI应该是 Bootstrap，使用jquery来操作的话，我最常用也是上面这种形式。给你举个例子

<h3>先点击编辑按钮：</h3>
    <table>
        <tr>
            <td><input type="text" id="item-td-input-1"></td>
            <td><button onclick="change(this);" pid="1">编辑</button></td>
        </tr>
        <tr>
            <td><input type="text" id="item-td-input-2"></td>
            <td><button onclick="change(this);" pid="2">编辑</button></td>
        </tr>
        <tr>
            <td><input type="text" id="item-td-input-3"></td>
            <td><button onclick="change(this);" pid="3">编辑</button></td>
        </tr>
    </table>
    <hr>
    <div>
        <h3> modal编辑框：</h3>
        <input type="text" placeholder="这里是要编辑的内容.." id="writeInput">
        <button onclick="writeTo(this)" id="writeBtn" toPid="">写入</button>
    </div>

假设上面就是你的表格，为了方便我直接把modal抽象到body中，没有弹出效果，给td一个id，id后面有一个pid，这个pid是唯一的。在button中加入这个pid的attr。（也可以放在tr中，放在那里无所谓）。

点击编辑的时候，首先触发change()，把唯一标示 pid绑定到modal中的button的一个属性中，然后展开modal。

点击提交的时候，根据pid拼接td>input的id，然后查找元素，并写入这个input即可

function change(obj) {
        var pid = obj.getAttribute("pid");
        // 将pid隐藏到 modal的btn中
        document.getElementById("writeBtn").setAttribute("toPid",pid);
        document.getElementById("writeInput").focus();
        alert("假装modal弹出了，内容是下面的内容");
    }
    // modal 的button操作
    function writeTo(obj){
        // 获取input的value并写入相关的pid中
        var pid = obj.getAttribute("toPid");
        document.getElementById("item-td-input-" + pid).setAttribute("value", document.getElementById("writeInput").value);
    }

Answer 2

var 一个变量，当你发生点击事件时把你点击的这个文本框的id或者index赋值给变量，弹窗点确定后通过这个变量来找到点击的文本框

Answer 3

点击文本框时获得这个文本框的唯一标识（不管是id 还是这一行的哪个文本框，只要是能唯一标识他的就行）-》存在一个变量里=》点击提交后，再找到这个文本框给他赋值。

Answer 4

vue框架的话好解决，自身就有数据的互绑
jq的话可能需要你给目标文本框来个data-id，弹出框动态赋值一个对应data-tanid，这样每次确认之后都把他扔到对应id的文本框里

Answer 5

   //编辑页面的确定按钮加一个单机方法`GetChooseIn`
   //Title为你编辑框的值
   //txtbox为你父级页面的文本框控件id
    function GetChooseIn(Title) {
        $('#textbox', window.parent.document).val(Title);
    } 

Answer 6

根据每个input的name值，将弹框输入的内容赋值到对应的input，可以给弹框的div加一个$(this).data('curInput','当前的name值')来判断当前编辑的input