按照这个系统写的一个小的web程序，前端额页面极其的丑陋，只是简单的把动态写入table保存一下，话不多说上代码
$.ajax({ type: "post", ansyv: false, data: { "findName": findName }, datatype: "json", contentType: "application/x-www-form-urlencoded; charset=utf-8", url: "book?action=bookList", success: function (data) { var result = eval('(' + data + ')') //转化获取的json对象 if (result.status == 1) { var len = result.books.length; var str = "<tr><td>id</td><td>书名</td><td>价格</td><td>库存</td><td>借出</td><td>操作</td></tr>"; for (var i = 0; i < len; i++) { str += "<tr><td>" + result.books[i].id + "</td>" + "<td>" + result.books[i].name + "</td>" + "<td>" + result.books[i].price + "</td>" + "<td>" + result.books[i].kucun + "</td>" + "<td>" + result.books[i].borrow + "</td>" + "<td ><input type='button' value='购买' onclick='buy(" + result.books[i].id + ")'>" + "<input type='button' value='租借' onclick='borrow(" + result.books[i].id + ")'></tr></td> "; } document.getElementById("alternatecolor").innerHTML = str; altRows('alternatecolor'); } else if (result.status == 0) { alert("查询失败"); } else { alert("图书不存在") } }, })上面的追加数据用的是原生的JS
我还去网上找的渲染table的一段css代码，上效果图：
（捂脸，我竟然敢发出来哈哈）
document.getElementById("alternatecolor").innerHTML = str; //原生的Js
这段代码试将哪段代码写入到对应的标签当中去，就是这个table里面
<h2>图书查询</h2> 书名：<input type="text" id="findName" name="findName"> <input type="button" value="查询" onclick="search_1()"><input type="button" value="匹配" onclick="findBook()"><br> <div id="book" style="margin: 10px;"> <table class="altrowstable" id="alternatecolor" width="500px"> </table> </div>奥对了还有table渲染的代码css和js的混合,其实特别的简单，这里留作备份的，
<style> table.altrowstable { font-family: verdana, arial, sans-serif; font-size: 20px; color: #333333; border-width: 3px; border-color: #a9c6c9; border-collapse: collapse; } table.altrowstable th { border-width: 3px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.altrowstable td { border-width: 3px; padding: 8px; border-style: solid; border-color: #a9c6c9; } .oddrowcolor { background-color: #d4e3e5; } .evenrowcolor { background-color: #c3dde0; } </style> <script type="text/javascript"> function altRows(id) { if (document.getElementsByTagName) { var table = document.getElementById(id); var rows = table.getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { if (i % 2 == 0) { rows[i].className = "evenrowcolor"; } else { rows[i].className = "oddrowcolor"; } } } } </script>
