Question

我的HTML页面中有一个表格，表格的行会在焦点上克隆出来。当我单击提交按钮时，我必须编写JQuery脚本来遍历所有表行并创建一个JSON数组，我将使用ajax调用将其发送到控制器。任何人都可以帮助我使用JQuery代码迭代克隆表行并从中创建一个JSON数组。

这是我的HTML表格

<form class="allergyrow">
        <table id="tab" border="1" width="1000">
            <thead >
                <tr>
                    <th scope="col">Remove</th>
                    <th scope="col">Allergy</th>
                    <th scope="col">Reaction</th>
                    <th scope="col">Adverse Event Date</th>
                    <th scope="col">Comment</th>
                </tr>
            </thead>
            <tbody>
                <tr class="datarow">
                    <td>
                        <input type="checkbox" id="remove" class="remove" value="Remove" />
                    </td>
                    <td>
                        <input type="text" id="myText" class="myText"/>
                    </td>
                    <td>
                        <div>
                            <table id="inner" class="inner">
                                <tbody>
                                    <tr class="innerrow">
                                        <td>
                                            <select id="myList" class="myList">
                                                <option value="1">Rashes</option>
                                                <option value="2">Shock</option>
                                                <option value="3">Asthma</option>
                                                <option value="4">Nausea</option>
                                                <option value="5">Anemia</option>
                                                <option value="6">Unknown/Other</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select class="reaction">
                                                <option>Yes</option>
                                                <option>Mild</option>
                                                <option>Moderate</option>
                                                <option>severe</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button class="plus">plus</button>

                                        </td>
                                        <td>
                                            <button class="minus">minus</button>                                        
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td>
                        <input type="date" id="eventdate" class="eventdate" />
                    </td>
                    <td>
                        <input type="text" id="comment" class="comment" />
                    </td>
            </tbody>
        </table>
    </form>

这是我克隆表行的JQuery代码

$("#comment").live('focusout',function(){
                count++;
                if(count<10)
                {               
                var row=$("#tab > tbody > tr:last").clone(true).insertAfter("#tab > tbody > tr:last"); 
                $(".myText",row).val('');

                $("#remove",row).hide();
                $(".myList", row).attr("disabled", "disabled");
                $(".reaction", row).attr("disabled", "disabled");
                $(".eventdate", row).attr("disabled", "disabled");
                $(".eventdate", row).val('');
                $(".comment", row).attr("disabled", "disabled");
                $(".comment",row).val('');
                $(".plus", row).attr("disabled", "disabled");
                }
            });

我在提交时有Jquery代码，但它只捕获第一行而不是所有克隆的表行。

$("button").click(function(){

        var removed=$('#remove').val();
        var allergy=$('#myText').val();
        var reaction=$('#myList').val();
        var severity=$('#reaction').val();
        var eventDate=$('#eventdate').val();
        var comment=$('#comment').val();
        var info={
                   removed : removed,
                   allergy : allergy,
                   reaction: reaction,
                   severity: severity,
                   eventDate: eventDate,
                   comment : comment};
          });

如果有人能告诉我如何遍历所有表行并创建一个JSON数组，我将非常感激。谢谢。

Answer 1

        var data={};
        $('table').find('tr').each(function(){
            var id=$(this).attr('id');
            var row={};
            $(this).find('input,select,textarea').each(function(){
                row[$(this).attr('name')]=$(this).val();
            });
            data[id]=row;
        });
        console.log(data);

有点像你需要这样做..

如何使用JQuery为克隆的表行创建JSON数组

1 个答案: