Javascript 生成动态div并检索输入元素的值

我有一个div与输入元素的添加和取消按钮。 当用户单击add按钮时，我需要使用相同的输入元素生成div，并将值捕获到JSon对象

这是我的代码片段

    <div id="filterfields" class="row collapse">

    <form class="form-inline" id="filterFieldsForm">
        <select class="form-control" name="TypeCode" id="filterType_0">

            <option value="Type">Type</option>
            <option value="SubmittedBy">SubmittedBy</option>
            <option value="Date">Date</option>
            <option value="Description">Description</option>

        </select>
        <select class="form-control" name="Filter" id="filterCondition_0">

            <option value="Equal">Equal</option>
            <option value="StartsWith">Starts With</option>
            <option value="EndsWith">Ends With</option>
            <option value="Greaterthan">Greater Than</option>
            <option value="Lessthan">Less Than</option>
        </select>
        <input type="text" name="caseFilterText" class="form-control" id="filterText_0">
        <input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
        <label for="andRadio">AND</label>
        <input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
        <label for="orRadio">OR</label>
        <button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
        <button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>

    </form>


</div>

---

由于我无法获取当前行的输入元素的值，请建议我是否有更好的方法来实现类似的功能。

考虑以下代码

$function{ 函数formToJsonfObj{ var j=[]； fObj.children.notbutton，label.eachfunction，el{ //避免使用按钮和标签 如果！$el.is:收音机&！$el.is:已检查{ //将避免未选中的单选按钮 变量d={ nodeName:$el.propnodeName， 道具：{ 类别：$el.ATRTCLASS， id:$el.attrid }, 价值：$el.val， 名称：$el.attrname }; 如果d.nodeName！=选择{ d、 props.type=$el.attrtype； } j、 pushd； } }; 返回j； } $[id^='addBtn']。单击函数{ var jsonData=formToJson$filterFieldsForm； console.logjsonData； 变量过滤器=过滤器：； $.eachjsonData，functionkey，item{ 如果键！=2{ 过滤器+=item.value+； }否则{ 过滤器+='+item.value+'； } }; $, { 类别：筛选结果 }.htmlfilter.appendTobody； }; }; 类型 提交人 日期 描述 相同的 开始于 以 大于 少于 和 或 添加 取消

---

感谢您的方法。我只需要JSON对象中的Id和值。我的另一个要求是，当我单击“添加新行”时，需要在当前行下方添加具有重置值的相同输入元素，并将值复制到JSON对象。@AMDI很容易调整示例脚本以满足您的需要。Sicne您在文章中没有包含该信息，我认为您需要重新创建整个元素。@Twisty所有内容都已排序，但在如何获取JSON对象方面面临问题。我想生成JSON对象，类似于var d={$el.attrid:$el.val}；请让我知道，如果我们可以实现这样的事情，你可以做到，但需要这样做：var d={}；d[$el.attrid]=$el.val；谢谢。我可以得到它。你太棒了。还有一件事，因为我们正在浏览，我得到了3个对象的数组。我是否可以得到Json数组，其中包含所有id和值的单个元素，比如var data=[{filterType:Type，filterCondition:Lessthan，filterText:ddfdd，filterClause:AND}]；

  $('#addBtn_' + count).click(function () {

            var newel = $("#filterfields").clone(true);

            var jsonData = [];

            $(newel).insertAfter("#filterfields");

            var index;

            $("#filterfields").find('input:text,select').each(function () {

                let str = '{"' + this.id + '":' + (this.value + '}';
                jsonData.push(str);

            }).end()

            newel.find(':input').each(function () {

                var oldId = $(this).attr("id");
                var split = oldId.toString().split('_');
                index = parseInt(split[1]);
                var curId = split[0];

                var newId = curId + "_" + index + 1;
                this.id = newId;

            }).end()

            jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');

        });