Issue
I am trying to have a table where the headers are there when page loads, but when a user presses a button, I would like to load the rest of the table (the trs and tds of the table) into the myTableInsertRows div, which is coming from an external js file.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<button onclick="getScript('Insert.js')"> Insert TR/TDs </button>
<div id="Table">
<table id='TableResult1'>
<th>Color</th>
<th>Number</th>
<th>Letter</th>
<div id="myTableInsertRows"></div>
</table>
</div>
</body>
<script type="text/javascript">
getScript=(url)=>{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if(document.body == null){
document.head.appendChild(script);
}else{
document.body.appendChild(script);
}
}
</script>
External JS file
var Insert= ' \
<tr><td>Red</td><td>One</td><td>AAAA</td></tr> '
document.getElementById('myTableInsertRows').innerHTML =Insert;
Solution
<table id='TableResult1'>
<thead>
<tr>
<th>Color</th>
<th>Number</th>
<th>Letter</th>
</tr>
</thead>
<tbody id="myTableInsertRows"></tbody>
</table>
You must follow the table structure in which <tr> should be in <tbody> or <thead> tag. I hope this will fix your issue.
Answered By - Asif Sharif Shahid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.