Using jQuery replaceWith on html elements

Question

I'm writing an MVC application and on one page I need to dynamically give an ID to all the elements because of the way the table is rendered and how data is passed to an from it. When I run this, all the elements are replaced with , however it is removing the content in between the tags. Is there any way to make it only replace the starting tag and not touch the rest, or another jQuery function to do this? My code is below:

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var oTable1 = $('#example1').dataTable({
    sScrollX: "100%",
    sScrollY: "200px",
    bFilter: false,
    bScrollCollapse: true,
    bPaginate: false,
    bScrollInfinite: true,
    iScollLoadGap: 10,
    oLanguage: {
        sZeroRecords: "There are no records that match your search criterion",
    }
}).makeEditable({ sUpdateURL: "/Home/UpdateData" });

});

</script>
<script type="text/javascript" charset="utf-8">
   $(document).ready(function () { var editChange = $('td').replaceWith('<td id = "@Html.ValueFor(x => x.name)" >'); });
</script>

Any help is appreciated.

Answer 1

Instead of using replaceWith may I suggest the use of another function, the function .attr() that is meant to replaced the attributes of an element.

$('td').attr('id','@Html.ValueFor(x => x.name)');

Also, be careful because the ASP values will not be available once in the client side. Your selector $('td') is pretty general, and IDS must be unique.

Answer 2

Try explicitly setting the id on the TD element(s)

$('td').each(function() { 
   this.id = @Html.ValueFor(x => x.name);
});