$(function(){
$('#subbtn').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);
localStorage.setItem("testingvalue",JSON.stringify(res));
document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue"));
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container centered">
<form class="content__form contact-form">
<div class="row">
<div class="col-lg-12">
<div class="bs-component" id="test1">
<table class="table table-responsive table-striped table-hover " id="tab">
<tbody>
<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>
<tr class="danger" id="alertr2">
<td>2</td>
<td>Takes Charge</td>
<td>
<select class="r2" style="position: absolute; z-index:9998;"
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>Takes Risks</td>
<td>
<select class="r2" style="position: absolute; z-index:9998;"
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>Loyal</td>
<td>
<select class="r2" style="position: absolute; z-index:9998; "
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>Accurate</td>
<td>
<select class="r2" style="position: absolute; z-index:9998; "
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>
</tbody>
</table>
<div id="source-button" class="btn btn-primary btn-xs" style="display: none;">< ></div>
</div>
</div>
</div>
<button class="contact-form__button" id="subbtn" type="button" >Send it</button>
</form>
<div class="results">
<h2 class="results__heading">Form Data</h2>
<pre class="results__display-wrapper"><code id="results__display"></code></pre>
</div>
</body>
Currenly，我有一个表格和一些类名，从r1到r10。在一行中，我有4个选择选项。行直到r10。现在我得到了一个jquery函数，它读取每行内容并存储到一个数组中。如何将这些数组调用到特定的行和列？ 例如，如果我为2,3,1,4选择r1，那么用户离开当前页面然后他再次返回并请求查看他们先前的输入。 r1中的选择选项将自动填充2,3,1,4。感谢。
答案 0 :(得分：2)
由于LocalStorage仅支持字符串，因此您使用JSON.stringify(res));的方式正确。现在，如果您想再次访问该数据，您应该执行类似
$(document).ready(function(){
var jsonData = {};
try {
jsonData = JSON.parse(localStorage.getItem("testingvalue"));
} catch (error){
console.log('could not load data from storage');
}
// access your data
for(var klass in jsonData){
var index = 0;
$(klass).find("select").each(function(){
// todo probably check if index exists
$(this).val(jsonData[index]);
index++;
}
}
}
答案 1 :(得分：1)
首先，每次点击btn值时，var tmp = res[cl];
tmp[0] => will give you first value
tmp[1]
tmp[2]
tmp[3]
都应该是全局的
假设您的res变量是全局的，并且您知道此处的atc名称为c1
{{1}}
注意：请相应地添加空检查