Jquery将Ajax返回的Response添加到table中

页面Code

<div style=" height:150px;overflow-x:scroll;margin-top:10px; " id="tableContainer" class="tableContainer">
<table width="100%" border="0" cellspacing="0"
cellpadding="1" id="myTab1" >
<thead>
<tr>
<td class="seth" nowrap align="left" ></td>
<td class="seth" nowrap align="left" ><a href="#">Refresh</a></td>
<td class="seth" nowrap align="left" ><b>test1</b></td>
<td class="seth" nowrap align="left" ><b>test2</b></td>
<td class="seth" nowrap align="left" ><b>test3</b></td>
<td class="seth" nowrap align="left" ><b>test4</b></td>
<td class="seth" nowrap align="left" ><b>test5</b></td>
<td class="seth" nowrap align="left" ><b>test6</td>
<td class="seth" nowrap align="left" ><b>test7</b></td>
<td class="seth" nowrap align="left" ><b>test8</b></td>
<td class="seth" nowrap align="left" ><b>test9</b></td>
<td class="seth" nowrap align="left" ><b>test10</b></td>
<td class="seth" nowrap align="left" ><b>test11</b></td>
<td class="seth" nowrap align="left" ><b>test12</b></td>
<td class="seth" nowrap align="left" ><b>test13</b></td>
<td class="seth" nowrap align="left" ><b>test14</b></td>
<td class="seth" nowrap align="left" ><b>test15</b></td>
<td class="seth" nowrap align="left" ><b>test16</b></td>
<td class="seth" nowrap align="left" ><b>test17</b></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

返回的Json Response

responseSearchJson= { "JSON":{
"searchList":[
{
"underlyingList":[
{
"symbol":"test11",
"description":"11",
"pXSpot":"100",
"lotSize":"100"
},
{
"symbol":"test12",
"description":"12",
"pXSpot":"120",
"lotSize":"120"
}
],
"exchange":"SEHK",
"cCY":"344",
"strike":"11",
"valueDate":"2017-04-28",
"tenor":"11",
"expiryDate":"2017-04-28",
"maturityDate":"2017-04-28",
"pX":"11",
"pA":"11",
"depo":"1111",
"cover":"11",
"noOfOrders":"11",
"tPlus":"11",
"correlationid":"11",
"makeId":"xd36221",
"currentTime":""
},
{
"underlyingList":[
{
"symbol":"test21",
"description":"21",
"pXSpot":"200",
"lotSize":"200"
},
{
"symbol":"tset22",
"description":"22",
"pXSpot":"220",
"lotSize":"220"
}
],
"exchange":"SEHK",
"cCY":"344",
"strike":"22",
"valueDate":"2017-04-28",
"tenor":"22",
"expiryDate":"2017-04-28",
"maturityDate":"2017-04-28",
"pX":"22",
"pA":"22",
"depo":"22",
"cover":"22",
"noOfOrders":"22",
"tPlus":"22",
"correlationid":"22",
"makeId":"",
"currentTime":""
}
],
"errorCode":"",
"errorMsg":""
}
}

Jquery  code

function populateSearchListResponse(responseJson){
if(responseJson!=""){
var repSearchListArr=responseJson.JSON.searchList;
if(repSearchListArr!=undefined){
var lengthForSearchList=repSearchListArr.length;
for(var i=0; i< lengthForSearchList;i++){

$("#myTab1").append("<tr class='table_search'>" +"<td nowrap align='center'><input type='radio' name='marsupial' value=" + i + " /></td>"+ "<td rowID="+ i + " onclick='fnRefresh(this);' nowrap align='center'><img src='<%=images%>/refresh.png' width='12px' height='12px' alt='i'></td>"+
"<td id="+'symbolList'+i +" nowrap align='left'></td>"+
"<td id="+'exchangeList'+i +" nowrap align='left'></td>"+
"<td id="+'descriptionList'+i +" nowrap align='left'></td>"+
"<td id="+'cCYList'+i +" nowrap align='left'></td>"+
"<td id="+'pXSpotList'+i +" nowrap align='left'></td>"+
"<td nowrap align='left'>"+ strike + "</td>"+
"<td nowrap align='left'>"+ valueDate + "</td>"+
"<td nowrap align='left'>"+ tenor + "</td>"+
"<td nowrap align='left'>"+ expiryDate + "</td>"+
"<td nowrap align='left'>"+ maturityDate + "</td>"+
"<td nowrap align='left'>"+ pX + "</td>"+
"<td nowrap align='left'>"+ pA + "</td>"+
"<td nowrap align='left'>"+ depo +"</td>"+
"<td nowrap align='left'>"+ cover + "</td>"+
"<td nowrap align='left'>"+ makeId + "</td>"+
"<td nowrap align='left'>"+ correlationid + "</td>"+
"<td nowrap align='left'>"+ currentTime + "</td>"+
"</tr>");

var underlyingListArr=responseJson.JSON.searchList[i].underlyingList;
var lengthForUnderlyingList=underlyingListArr.length;
for(var j=0;j<lengthForUnderlyingList;j++){

$("#descriptionList"+i).append(underlyingListArr[j].description+"<br>"); 
$("#pXSpotList"+i).append(underlyingListArr[j].pXSpot+"<br>");

}

}

这样就可以了，layout就得自己调试了。。但是这有个弊端，只能用到少量的数据，我们都知道现在是大数据时代，从数据库中我们要得到大量的数据，所以这个code

就不太适应了，而且数据一大JavaScript的执行时间过长，用户体验相当糟糕。这就需要进行翻页读数据库，即每一次翻页都要读一次数据库（无论是前后翻页）。

所以数据库的设计得好好搞了。

但是有时候还要进行Refrsh某一行，

function fnRefresh(obj){
var rowRefresh = $(obj).attr('rowID');//rowID就是拿取得这一行的行数，同时根据Json response的那一个来进行Refrsh。

}

同样进行radioButton的选取发现了一个问题，如果radiobutton只有一个话，我们用下面的方法会实效

这个是用form表单的。

for(var i=0;i<form.marsupial.length; i++) {
radioButtonLength = form.marsupial.length;
if(form.marsupial[i].checked){
var isSelected = true;
break;
}
}

所以当radiobutton只有一个的时候我们可以用这样的方法，

if(form.marsupial.length==undefined){
for(var i=0; i<document.form.elements.length; i++){
if(document.form.elements[i].type == "radio"){
if(document.form.elements[i].checked){
var isSelected = true;
break;
}
}
}
}