将包含4个元素的不同类名收集到JSON字符串中

时间:2017-05-16 13:03:23

标签: javascript jquery html json

我有一些从r1到r10的班级名称。在一行中,我有4个选择选项。这就像:

                           <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyO" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr>

我有10行喜欢这个。我想将r1到r10的所有元素收集到一个JSON字符串中,就像

一样
[
   r1: 4,2,3,1;
   r2: 2,1,3,4;
    .....
    .....
   r10: 2,1,4,3;
]

如何通过循环使用javascript或jquery方法获取它?因为如果用户输入了答案,我已经使用它们回到我的问题输入中。

2 个答案:

答案 0 :(得分:1)

我猜你可能想要的对象就像

{
   r1: [4,2,3,1],
   r2: [2,1,3,4],
    .....
    .....
   r10: [2,1,4,3]
}

由于您提及的对象无效,您可以使用.each()遍历所有select,并将其覆盖在其中的选项中

&#13;
&#13;
$(function(){
 $('#btn').click(function() {
  var res = {};
  console.log($('#tab').find('tr'))
  $('tr').each(function(){
      var tmp = [];
      var cl ;
      $(this).find('select').each(function(){
        cl = $(this).attr('class');
        console.log(cl);
        tmp.push($(this).val());
      })
      
      res[cl] = tmp
  })
  console.log(res);
 })
  
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div>   <table id="tab"> <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999;"  name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r2" style="position: absolute; z-index:9999;"
                                        name="qtyO" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999; "  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999; "  name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr></table>
                            </div>
   <button id="btn">click</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

不知道这是否是一种形式?您想收集用户选择的数据并将其存储到JSON对象中吗?

或者您想根据选择选项中的不同选项更改表单元素? // 您可以浏览选择字段,例如:

$.each( $('select:selected'), function() {
values[] = this.val();
}

或者像这样

$.each($("[name='r1']"), function() {
values[] = this.val();
});

现在您有一个数组,其中包含选择字段中的选定值。把它放在一个对象中:

var storedValues = {
    "r1" : values
 };

所以这样的事情应该有效:

$.each($("[name='r1']"), function() {
values[] = this.val();
});
storedValues.r1 = values;

等等到r10。然后你可以使用:

myValues = JSON.stringify(storedValues);

它会为您提供所有存储的数据:

{"r1":["1","5","4","3"],"r2":["2","2","1","5"]} .....etc.

我相信这会回答你的问题。我建议你丢失所有那些onclick,onmouseover等事件,并将所有功能放在一个单独的JS文件中。 如果你坚持使用JQuery,最快,最简单。

以下是关于表单的一些好消息的链接:

https://developer.mozilla.org/en-US/docs/Web/API/FormData