Hi,
Please help, I am using a javascript which is shown below to add a row dynamically to my table data in MVC view.Here I want to use 4 dropdown lists which should fetch data from database and show in the view.
$("#myButton").click(function () {
// Create elements dynamically
var newRow = '<tr>' +
'<td>@Html.DropDownList("SupplierId", String.Empty)</td>' +
'<td>@Html.DropDownList("SKU", String.Empty)</td>' +
..
'</tr>';
// Add the new dynamic row after the last row
$('#myTable tr:last').after(newRow);
//var newRow1='<tr>'+'<td><input type="Submit"/></td>'+'</tr>';
});
// Bind the click event, to the table rows
// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#myTable').on('click', 'tr', function (event) {
// Add or Remove the class on clicking the table row
$(this).toggleClass('myClass');
});
While running my application I am getting error, "SCRIPT1015 error;Unterminated string constant" at
'<td><select id="SupplierId" name="SupplierId"><option value=""></option>a this point
I think it is looking for a closing </select></td>' a this point
<option value="1">Abc </option>
<option value="2">Qwert </option>
<option value="3">aqwq </option>
</select></td>'
The code showing error while running is shown below:
$("#myButton").click(function () {
// Create elements dynamically
var newRow = '<tr>' +
'<td><select id="SupplierId" name="SupplierId"><option value=""></option>
<option value="1">Abc </option>
<option value="2">Qwert </option>
<option value="3">aqwq </option>
</select></td>' +
'<td><select id="SKU" name="SKU"><option value=""></option>
<option value="1">Parcetamol</option>
<option value="2">Cosome </option>
<option value="3">Crocin </option>
</select></td>' +
'<td><input type="text" id="Price" name="Price" style="width:75px;" /></td>' +
'<td><input type="text" id="Validity" name="Validity" style="width:75px;" class="datepicker"/></td>' +
'<td><input type="text" id="Quantity" name="Quantity" style="width:75px;" /></td>' +
'<td><select id="CreditId" name="CreditId"><option value=""></option>
<option value="1">30 Days </option>
<option value="2">15 Days </option>
<option value="4">20 Days </option>
</select></td>' +
'<td><input type="text" id="DeliveryDate" name="DeliveryDate" style="width:75px;" /></td>' +
'<td><input type="text" id="ETA" name="ETA" style="width:75px;" /></td>' +
'<td><select id="CommModeId" name="CommModeId"><option value=""></option>
<option value="1">Telephone </option>
<option value="2">E-Mail </option>
<option value="3">Web </option>
<option value="7">Direct </option>
</select></td>' +
'</tr>';
$('#myTable tr:last').after(newRow);
//var newRow1='<tr>'+'<td><input type="Submit"/></td>'+'</tr>';
});
Any help will be appreciated.Thanks in advance.