Question

jquery动态添加表格

我现在有个需求就是，根据jsp页面选中的id，把具体的信息返回到页面，要异步展现：比如说页面有很多信息，鼠标选中之后，就会把该信息对应的具体说明(是个table)展现到页面某个位置。选择不同，展现的信息也不懂。帮忙解决思路2即可。
我的思路是：
1：页面选中之后，jquery的ajax把id传到servlet,然后后台根据这个id查询具体信息，再把这个table拼接好，会涉及到跨行跨列，最终是一个长字符串，然后返回到页面，最后把这一大串html元素加载到页面的某个div里面。
但是后来觉得，如果这样的话后台不能复用，而且如果以后改个样式还得去修改后台，不太方便。我改变了思路。
2：还是把页面选择的id传到后台，但后台不拼接组建table的字符串，只把对象的具体信息返回回来。这个table在页面进行拼接，使用jquery，有可能跨行跨列等。这个数据结构该怎么构建 ？后台用json如何构建这个对象信息？另外，页面怎么解开这个json，然后使用jquery拼接这个table呢。

Answer 1

在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。
例如：
<script type="text/javascript">
$(document).ready(function(){
alert(isNaN($('#id').val()));
});
</script>可以直接使用

Answer 2

用jQuery的each就可以的

追问

具体说一下可以吗？我要返回什么类型数据 ，前台怎么拼 ？

追答

后台返回的字符串应该形如：

var jsonData = [
    { id: 1, name: 'name1', sex: 'sex1', age: '21' },
    { id: 2, name: 'name2', sex: 'sex2', age: '22' },
    { id: 3, name: 'name3', sex: 'sex3', age: '23' },
    { id: 4, name: 'name4', sex: 'sex4', age: '24' }
];

前台页面做如下处理：（这是比较笨的办法）

$(function () {
    if ($(jsonData).length > 0) {
        var tableHtml = '';
        tableHtml += '<table>';
        $(jsonData).each(function (index, item) {
            tableHtml += '<tr>';
            tableHtml += '<td>序号：' + index + '</td>';
            tableHtml += '<td>编号：' + item.id + '</td>';
            tableHtml += '<td>姓名：' + item.name + '</td>';
            tableHtml += '<td>性别：' + item.sex + '</td>';
            tableHtml += '<td>年龄：' + item.age + '</td>';
            tableHtml += '</tr>';
        });
        tableHtml += '</table>';
        $('#myJson').html(tableHtml);
    }
});

将组织好的html代码放入id="myJson"的div里面：

<div id="myJson"></div>