js动态写入table中的数据

按照这个系统写的一个小的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>