使用 jquery 更改 id attr 的值答案

【问题标题】：change id attr's value using jquery使用 jquery 更改 id attr 的值
【发布时间】：2014-04-28 15:53:50
【问题描述】：

我有一张表，它的数据是从数据库中取出来的，而且这张表的每个td的id也是动态唯一的（td的id值等于数据库的表值）。在每个 td 中，当任何人双击它时，会出现一个输入字段，当用户编辑输入字段时，我进行了 Ajax 调用（使用 onblur），并在数据库中更新此 td 的字段。我猜这会起作用，现在我想更改 td 的 id 值，它将来自数据库（Ajax 调用）。

例如::

我的表代码::

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

这个td的id是从database生成的，其中第一个2是表id的id，在(*) 是 db 表的列名 [Name]，(>) 之后是 id 为 2 的列的值

当任何人点击这个 td 时，他/她会得到一个如下所示的输入字段::

 <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>

这是使用 jquery onclick 事件生成的。

现在，如果上述输入字段有任何变化，AjaxChange 就会被调用。我的 AjaxChange 代码是 ::

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>
      }
   });
 }

现在如何更改此 td 的 id 属性？

【问题讨论】：

只是好奇，你为什么在id="2*Name>Engr._C.F._Zaman"中使用元字符？
这样我提取 2，姓名，Engr._C.F._Zaman，有更好的主意吗？
我建议你使用 data-* 属性
我不明白。 id 只是一个属性，你试过用 $(this).attr('id','myNewId') 设置它吗？ [this if 在 click() 处理程序中]
@sabbir，我已经给出了一个替代解决方案，如果你希望你可以实现它

标签： javascript php jquery html mysql

【解决方案1】：

解决当前问题。

<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>

脚本函数

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)
      }
   });
}

但是，我强烈建议您重构代码并使用 data-* 属性。举个例子

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)
      }
   });
})

【讨论】：

我也强烈支持这个！
我也同意这一点，id 是您用来标识唯一元素的东西，您很少更改此属性。使用 data-* 属性不仅可以更轻松地找到您的独特元素（因为您可以识别它），而且还与所有标准兼容。

【解决方案2】：

我想您的意思是使用 javascript/jquery，这意味着获取 id 的最简单方法是使用 jqueries “attr”-function。

现在的问题是你应该使用什么选择器，我猜在这种情况下你的输入字段 id ("sabbir") 就足够了。您必须自行决定。

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

作为对您评论中另一个问题的回答：

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

应该可以替换 tds HTML。

【讨论】：

这不是一个很难的问题，问题是确定如何找到你的td。我怀疑“#sabbir”只是一个临时ID，你必须想办法找到你的td。也许您可以通过跟踪表中的 dom 来做到这一点？
你读懂了我的想法，我唯一的问题是改变td的id值，我怎么才能找到这个td，请帮助我
不要更改 ID 并改用数据值属性。 :) 上面有一个非常好的解决方案。
感谢@Undrium 的建议，我已经按照你说的做了，而且效果很好，

【解决方案3】：

你的 ID 2*Name>Engr._C.F._Zaman 来自数据库，是错误的。因为 special char 并不总是给出你想要的结果，所以你应该避免这个特殊的 char。您可以使用data-* 来存储您的数据库 信息，这样您就不必每次都更改您的ID。

【讨论】：