Question

我通过拖放工具创建表单，我将其保存在一个变量中。喜欢以下

var addform = '<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">                        
   <div class="controls" style="border:0px">
    <input type="text" placeholder="Enter First Name" class="input-xlarge" req="yes" name="First Name"> 
  </div>

  <div class="controls" style="border:0px">     
    <input type="text" placeholder="Enter Last Name" name="Last Name" class="input-xlarge" req="no">        
  </div>                        

  <div class="controls" style="border:0px" name="Contact time" req="yes">         
    <label class="checkbox inline">         
        <input type="checkbox" value="Day" name="Contact time" id="Contact time_0" req="yes">Day        
    </label>        
    <label class="checkbox inline">          
        <input type="checkbox" value="Night" name="Contact time" id="Contact time_1" req="yes">Night
    </label>        
    <label class="checkbox inline">          
        <input type="checkbox" value="Any" name="Contact time" id="Contact time_2" req="yes"> Any       
    </label>    
  </div>                    

  <div class="controls" style="border:0px">  
    <textarea style="min-height: 100px" placeholder="Enter Message" class="input-xlarge" req="yes" name="Message">
    </textarea>                               
  </div>                    

  <div class="controls" style="border:0px">     
    <button class="btn btn-success">Send</button>       
  </div>                
</form>';

当用户通过相同的方式（拖放方式）编辑相同的表单时，我将其保存在另一个变量中，如下所示

var editform = '<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">                       

<div class="controls" style="border:0px">   
    <input type="text" placeholder="Enter Last Name" name="Last Name" class="input-xlarge" req="no">        
</div>                          

<div class="controls" style="border:0px" name="Contact time" req="yes">         
    <label class="checkbox inline">         
        <input type="checkbox" value="Day" name="Contact time" id="Contact time_0" req="yes">Day        
    </label>        
    <label class="checkbox inline">          
        <input type="checkbox" value="Night" name="Contact time" id="Contact time_1" req="yes">Night
    </label>        
    <label class="checkbox inline">          
        <input type="checkbox" value="Any" name="Contact time" id="Contact time_2" req="yes"> Any       
    </label>    
</div>                      

<div class="controls" style="border:0px">  
    <textarea style="min-height: 100px" placeholder="Enter Message" class="input-xlarge" req="yes" name="Message">
    </textarea>                               
</div>                      

 <div class="controls" style="border:0px">      
    <button class="btn btn-success">Send</button>       
 </div>                 
</form> ';

现在我的问题是如何在编辑时比较基于用户的两个变量添加/删除任何输入元素。

在上述情况下，在编辑时我删除了名字输入元素，因此它应该说“你已从表格中删除了一个元素”。

我不知道是不是可以通过javascript / jquery？请指导我这个

由于

Answer 1

如果只有div，input等等一些常用的控件将被编辑，你可以这样做：

var form1 = $(addform);
var form2 = $(editform);
if(form1.find('div').length != form2.find('div').length)
    alert('There is change in number of divs.');
// and so on...

或者你可以同时遍历两种形式的树形结构（使用上述方法），直到找到一些变化或结束儿童。

Answer 2

首先用\ n打破它以形成一个行数组，然后逐行比较它们，然后当你能找到差异时，找到不匹配行之间的差异，最后将其显示为输出。

如何根据条件比较两种形式

2 个答案: