Im' having problems with JQuery and Internet Explore (IE). My method for adding rows doesn't seem to be working in IE (Chrome & Firefox pose no problem)
Imagine following table
<table border="1">
<tr>
<td><button class="btn">btn1a</button></td>
<td><button class="btn">btn1b</button></td>
<td>zever</td>
<td>zeverin pakskes</td>
</tr>
<tr>
<td><button class="btn">btn2a</button></td>
<td><button class="btn">btn2b</button></td>
<td>zever</td>
<td>zeverin pakskes</td>
</tr>
</table>
To Add rows (when the user clicks a 'button') i perform the following method
$(document).ready(function(){
$('.btn').on('click',function(){
var parentrow = $(this).parent().parent();
parentrow.after('<tr ><td colspan="4">Dit is een colspan rij</td></tr>');
});
});
Question: How can i alter my method so it works in IE too? (e. g. the row is being added)?
Note: i'm using the following JQuery - library
<script src="https://code.jquery.com/jquery.js"></script>
How to add a new row in a table using jQuery? Use event delegations to include both add a new and delete a table row on a web page using jQuery. Firstly, set a button in HTML to add new row Now under the button click event, set the code:
HTML code: Let us start by defining the basic HTML structure of the web page. Initially, the table is empty and has no rows. We will start by adding rows dynamically inside the table body and then see how to remove a row from the table. To add a row, define a variable that keeps the count of the total number of that now exists in the table.
In order to tackle the second problem, we will get all the rows next to the row where the remove button is clicked using the .nextAll () method of jQuery and then iterate across each of these elements to modify the row index and row id. The code is as follows: This code can be modified in several ways according to the needs.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Remove the traling space in your opening <tr>
tag, IE doesn't like invalid HTML (no joke!!). ;-)
parentrow.after('<tr><td colspan="4">Dit is een colspan rij</td></tr>');
I also came across the same problem few months back and followed the below approach
Create the elements as separate elements instead:
parent.after($('<tr/>').append($('<td colspan="4" />').text('Dit is een colspan rij')));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With