Seeking advice on how to display the last two input boxes in a dynamic HTML table so that users can easily view the data they have entered. The issue arises when the length of the data in these columns is large, making it difficult for users to see all the content at once.
HTML :
<table id="master_table" border="0">
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
<td> </td>
</tr>
<tr>
<td>
<input type="text" name="col1" class="col1"/>
</td>
<td>
<input type="text" name="col2" class="col2"/>
</td>
<td>
<input type="text" name="col3" class="col3"/>
</td>
<td>
<input type="text" name="col4" class="col4"/>
</td>
<td>
<input type="button" name="addRow" class="add" value='Add'/>
</td>
<td>
<input type="button" name="removeRow" class="removeRow" value='Delete'/>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
</td>
</tr>
</table>
Fiddle demo :
Update : Kudos to @dr Manish Joshi
Achieved the desired result HERE.
Although it works fine in jsfiddle, encountering a JavaScript error when running it in a browser.
uncaught typeerror cannot read property 'addeventlistener' of null