使用jquery更改id attr的值

I have a table whose data is fetched from the database, and this table's each td's id is also dynamically unique ( td's id value is equal to database's table value ). In each td, when anyone double click on it, an input field is appeared, when the user edits an input field, I have made an Ajax call (using onblur), and update this td's field in the database. which will be worked I guess, Now I want to change that td's id value, which will come from database (Ajax call).

for example::

My table code ::

<td id="2*Name>Engr._C.F._Zaman" class=" "> Engr. C.F. Zaman  </td>

this td's id is generated from database, where first 2 is id of the table's id, after (*) is the db table's column name [Name] and after (>) is the value of that column's whose id is 2

when anyone click on this td, he/she will get an input field just like as given below::

 <td id="2*Name>Engr._C.F._Zaman" class=" ">
    <input type="text" class="form-control" id="sabbir" value="Engr._C.F._Zaman" name="Name" onblur="AjaxChange('2', 'Name', 'Engr._C.F._Zaman', '2*Name>Engr._C.F._Zaman');">
 </td> 

this is generated using jquery onclick event.

Now if any change of above input field, AjaxChange is called. and my AjaxChange code is ::

function AjaxChange( id,  Attr, tdValue, td ) {  
   $.ajax({
      url: "ajax_call.php",  // this is just update the db 
      type: "POST",
      data: { table: "life", id=id, name=Attr, value=tdValue },  // 
      dataType: "html",
      done: function(data) {
        // first I want to change the id of td, which value will be data
        // td's id format is id*Attr>data

        // next show data in the td with out input field
        // <td id="id*Attr>data"> data </td>
      }
   });
 }

Now How can I change this td's id attribute?

I suppose you meant using javascript/jquery, meaning the easiest way to reach the id would be using jqueries "attr"-function.

Now the question is what selector you should use, I guess in this case that your input fields id ("sabbir") is sufficient enough. You will have to decide this on your own.

$("#sabbir").closest("td").attr("id", yourNewId);

As answer to the other question in your comment:

$("#"+yourNewId).html(data);

Should work to replace the tds HTML.

Solution to immediate problem.

<td id="2*Name>Engr._C.F._Zaman" class=" ">
    <input type="text" class="form-control" id="sabbir" 
        value="Engr._C.F._Zaman" 
        name="Name" 
        onblur="AjaxChange('2', 'Name', 'Engr._C.F._Zaman', '2*Name>Engr._C.F._Zaman', this);">
</td> 

Script function

function AjaxChange( id,  Attr, tdValue, td, element ) {  
   $.ajax({
      url: "ajax_call.php",  // this is just update the db 
      type: "POST",
      data: { table: "life", id=id, name=Attr, value=tdValue },  // 
      dataType: "html",
      done: function(data) {
        //Set ID
        $(element).closest("td").prop('id', YourNewID)
      }
   });
}

However, I would strongly recommend you to refactor your code and use data-* attribute. Heres example

HTML

<td class="" data-value="2*Name>Engr._C.F._Zaman" data-id="2" data-attr="Name" data-name="Engr._C.F._Zaman" >
    <input type="text" class="form-control name-txt" 
        value="Engr._C.F._Zaman" 
        name="Name">
</td> 

JavaScript

$('.name-txt').on('blur', function(){
    var self = $(this);
    var cell = self.closest("td");
    var id = cell.data('id');
    var Attr= cell.data('Attr');
    var name= cell.data('name');
    var tdValue = cell.data('value');

    $.ajax({
      url: "ajax_call.php",  // this is just update the db 
      type: "POST",
      data: { table: "life", id=id, name=Attr, value=tdValue },  // 
      dataType: "html",
      done: function(data) {
        //Update values using
        cell.data('id', YourNewID)
      }
   });
})

your's ID 2*Name>Engr._C.F._Zaman which come from Database, is bad. Because special char is not always give result what you want, you should avoid this special char. You can use data-* to store your Database information then you don't have to change your ID every time.