Jquery序列化对于动态文本框获得相同的值

Question

我正在使用以下代码用复选框创建动态文本框。

function addNewModifier() 
    { 
     $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" onclick="saveNewModifier()"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    } 

通过使用上述功能我在一个表中添加新行，然后点击保存按钮，我需要的表单数据。

我的保存功能如下。

function saveNewModifier() 
    { 
     var groupName = $("#insertModifier").serialize(); 
     alert(groupName); 
    } 

上述saveNewModifier()功能只给文本框的值并且总是相同的。

请帮助我如何获得复选框和文本框的价值总是不同的创建新行。

Answer 1

这里是一个例子。这可能帮助你

function saveNewModifier() 
 
    { 
 
     var groupName = $("#insertModifier").serialize(); 
 
     var checkValue = $("#status").serialize(); 
 
     alert(groupName); 
 
     alert(checkValue); 
 
     
 
    } 
 
function addNewModifier() 
 
    { 
 
     $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
 
     $(this).serialize(); 
 
    } 
 

 

 
addNewModifier(); 
 

 
$(document).ready(function(){ 
 
    $("#btnSave").on('click', function() { 
 
     saveNewModifier(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<table id="modifiersList"> 
 
    <tr><td>Dummy Data</td></tr> 
 
</table>

这是你的问题的精确解click here

function saveNewModifier() 
    { 
     var groupName = $("#insertModifier").serialize(); 
     var checkValue = $("#status").serialize(); 
     alert(groupName); 
     alert(checkValue); 

    }; 

function addNewModifier() 
    { 
$('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    }; 



$(document).ready(function(){ 
    $("body").on('click', '#btnSave', function() { 
     saveNewModifier(); 
    }); 
}); 

---

<table id="modifiersList"> 
    <tr><td onclick="addNewModifier();">add new html</td></tr> 
</table>