I have two tables on my page. After ajax is called, I hide one and then use html to spell out another table. As a result, the new table has an undefined at the top. How is this caused, how can this problem be solved? The Code is as follows:
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
If ($. browser. msie)
{
$ ("# Country"). get (0). attachEvent ("onpropertychange", function (o ){
Var countr = o. srcElement. value;
$ ("# Tabb1"). hide ();
$. Ajax ({
Type: "post ",
Url: "/yoblhtjfx/queryCountryAjax. action ",
Data: "country =" + countr + "& jsoncallback =? ",
DataType: "json ",
Success: function (json)
{
Var tableHTML;
TableHTML + = "<table id = 'tabb1 'border = '1' width = '000000'> ";
TableHTML + = "<tr> ";
TableHTML + = "<td style = 'text-align: Center'> select </td> ";
TableHTML + = "<td style = 'text-align: Center'> area code </td> ";
TableHTML + = "<td style = 'text-align: Center'> country name </td> ";
TableHTML + = "</tr> ";
Var list = json. list;
For (var I = 0; I <list. length; I ++)
{
TableHTML + = "<tr> ";
TableHTML + = "<td style = 'text-align: center '> <input type = 'Radio' name = 'radioo' value = '"+ list [I] [1] +"'/> </td> ";
TableHTML + = "<td style = 'text-align: Center'>" + list [I] [0] + "</td> ";
TableHTML + = "<td style = 'text-align: Center'>" + list [I] [1] + "</td> ";
TableHTML + = "</tr> ";
}
TableHTML + = "</table> ";
$ ("# Querycountrydiv" ).html (tableHTML );
}
});
});
}
});
Function returnVal ()
{
Var valu;
For (var I = 0; I <document. getElementsByName ("radioo"). length; I ++)
{
If (document. getElementsByName ("radioo") [I]. checked = true)
{
Valu = document. getElementsByName ("radioo") [I]. value;
}
}
Specified parameter opener.doc ument. getElementById ("foreignUnitCountry"). value = valu;
Window. close ();
}
</Script>
</Head>
<Body>
<Div align = "center" style = "width: 100%;">
Enter name to search:Copy codeThe Code is as follows: <input id = "country" name = "country" value = "">
</Div>
<Hr id = "hr"/>
<Div id = "querycountrydiv" name = "querycountrydiv" style = "width: 100%; height: 80%; overflow: auto; border: 1px solid #000000;">
<Table id = "tabb1" border = "1" width = "100%">
<Tr>
<Td style = "text-align: center" nowrap = "nowrap"> select </td>
<Td style = "text-align: center" nowrap = "nowrap"> area code </td>
<Td style = "text-align: center" nowrap = "nowrap"> country name </td>
</Tr>
<C: forEach items = "$ {list}" var = "list">
<Tr>
<Td style = "text-align: center "nowrap =" nowrap "> <input type =" radio "name =" radioo "value =" $ {list [1]} "/> </td>
<Td style = "text-align: center" nowrap = "nowrap" >$ {list [0]} </td>
<Td style = "text-align: center" nowrap = "nowrap" >$ {list [1]} </td>
</Tr>
</C: forEach>
</Table>
</Div> <br>
<Hr id = "hr"/>
<Div>
<Input id = "button" type = "button" value = "OK" onclick = "returnVal ();"/>
<Input id = "button" type = "button" value = "close" onclick = "window. close ();"/>
</Div>
</Body>
</Html>
A syntax error occurs in a code segment in the above Code. The modified code segment is as follows:
Success: function (json ){
Var tableHTML = ";
...