$(\'#buttonadd\').click(function(){
if ($counter < 10)
{
$counter++;
$countonlyadd++;
$(\
Questions are:
table
> wrapper in #buttondiv ?Think about these questions and if result is "no", that's the problem
If you have <table
> wrapper, change
$('#buttondiv').
to
$('#buttondiv table').
ya the problem is IE compatibility mode. This works fine in IE9 http://jsfiddle.net/NP9pG/3/ and firefox but when you switch to IE compatibility mode it doesn't work.
<div id="buttondiv"> </div>
<div id="send_count"></div>
<input type="button" id="buttonadd" value="add" />
but this http://jsfiddle.net/NP9pG/4/ will work fine tho in IE compatibility mode
<table id="buttondiv"> </table>
<div id="send_count"></div>
<input type="button" id="buttonadd" value="add" />
ya the problem is your html mark-up as suggested make the following change
<div id="buttondiv">
<table id="tableData"></table>
</div>
rather append items to table
instead of div
element
therefore js code:
$('#tableData').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#"> [X]</a></td></tr>');
hope that helps
Looks like you are adding a tr
directly into which is not a valid html in any browser. Other browsers will not shout but IE will. Try this.
Working demo
Markup change
<div id="buttondiv">
<table></table>
</div>
JS change
$('#buttonadd').click(function(){
if ($counter < 10)
{
$counter++;
$countonlyadd++;
$('#buttondiv table').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#"> [X]</a></td></tr>');
}else{
}
$('#send_count').val($countonlyadd);
});
It appears you're appending a single TR to a div, which may be your problem. You should append it to the TBODY of a TABLE instead.
Maybe it helps if you create the elements first..so create an object for your row, column, textbox, etc. And than append that into each other. Finally append the row to your div. Besides that, it is a bit weird to add a row to a div, and not to a table...