I have created a data table using
<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>
I want to put the table inside a DIV tag. But the script is creating the table inside the body and not where I want it to be. Is there any way I can put the same table inside the DIV?
Thanks in advance. PS. There are lot of entries inside the table. I added only 2 for demo purpose.
Use folowing code snippet as container in html:
<div id="container"></div>
and update script like
<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>
<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>
And now you have this HTML just put it inside a div
, for ex. this is the HTML:
<div id="testing"></div>
Now do:
$("#testing").html(table);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.