如何使用Jquery在DIV标记内创建表?

时间:2016-05-02 06:12:37

标签: javascript jquery html html-table

我使用

创建了一个数据表
<script>
 var table = '<table border="0" id="tblTestCases">';

            table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of text boxes = " + $searchObject.find('[type=text]').length + "</td></tr>";
            $searchObject.find('[type=text]').each(function () {
                table+="<tr bgcolor='#ccccff'><td>Name of textbox = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if cursor is displayed/blinking after mouse click <br /> 2)Check if a text can be entered inside</td></tr>";
            });

            table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of Submit Buttons = " + $searchObject.find('[type=submit]').length + "</td></tr>";
            $searchObject.find('[type=submit]').each(function () {
                table+="<tr bgcolor='#6666ff'><td>Name of Submit button = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if the button is clickable or not <br /> 2) Check if the submission result is displayed after mouse click";
            });
</script>

我想把表放在DIV标签内。但是脚本在正文中创建了表,而不是我想要的表。有什么方法可以把同一张桌子放在DIV里面吗?

提前致谢。 PS。表格中有很多条目。我只添加了2个用于演示目的。

2 个答案:

答案 0 :(得分:1)

在html中使用以下代码段作为容器:

<div id="container"></div>

并更新脚本,如

<script>
var table = '<table border="0" id="tblTestCases">';

        table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of text boxes = " + $searchObject.find('[type=text]').length + "</td></tr>";
        $searchObject.find('[type=text]').each(function () {
            table+="<tr bgcolor='#ccccff'><td>Name of textbox = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if cursor is displayed/blinking after mouse click <br /> 2)Check if a text can be entered inside</td></tr>";
        });

        table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of Submit Buttons = " + $searchObject.find('[type=submit]').length + "</td></tr>";
        $searchObject.find('[type=submit]').each(function () {
            table+="<tr bgcolor='#6666ff'><td>Name of Submit button = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if the button is clickable or not <br /> 2) Check if the submission result is displayed after mouse click";
        });
$("#container").html(table);
</script>

答案 1 :(得分:0)

<script>
 var table = '<table border="0" id="tblTestCases">';

            table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of text boxes = " + $searchObject.find('[type=text]').length + "</td></tr>";
            $searchObject.find('[type=text]').each(function () {
                table+="<tr bgcolor='#ccccff'><td>Name of textbox = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if cursor is displayed/blinking after mouse click <br /> 2)Check if a text can be entered inside</td></tr>";
            });

            table+="<tr bgcolor='#e6e6e6'><td colspan='3'>Number of Submit Buttons = " + $searchObject.find('[type=submit]').length + "</td></tr>";
            $searchObject.find('[type=submit]').each(function () {
                table+="<tr bgcolor='#6666ff'><td>Name of Submit button = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> Test cases : <br /> 1) Check if the button is clickable or not <br /> 2) Check if the submission result is displayed after mouse click";
            });
</script>

现在你有这个HTML只是把它放在div里面,例如。这是HTML:

<div id="testing"></div>

现在做:

$("#testing").html(table);