Question

我有一张桌子：

 <table class="table-hover table table-bordered">
    <tr>
        <th>
            Table headers
        </th>
        ....
        <th></th>
    </tr>
    <tr>
        <td>
            ID
        </td>
        ...
    </tr>
    <tr id=Id TD above> <tr>
 </table>

我正在使用table rows调用添加新的ajax：

$("tr").click(function () {
    var Id = $(this).find('td').first().text().trim();
    $.ajax({
        url: "/DeviceInstance/LoadPartialData",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data:  JSON.stringify({id: Id}) ,
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            $('#' + Id).after().html(data);
            $('#' + Id).fadeToggle("slow", "linear");
        }
    });

但是ajax添加的行正在从table table-hover table-bordered

上的table类的分配中获取css

有没有办法刷新它？

http://jsfiddle.net/LW3Lm/

Answer 1

您在现有tr内添加了少量td。您需要附加到table或tbody。你的输出html就像这样：

<tr>
    <td>
        <tr><td></td></tr>
    </td>
</tr>

你不想要的。我想这就是你想要的......

HTML

<table class="table-hover table table-bordered">
<tbody>
  <tr>
    <th>
        Table headers
    </th>

    <th>new</th>
  </tr>
  <tr>
    <td>
      <b>cell values</b>
    </td>
    <td>
        <b>cell values</b>
    </td>

</tr>
  <tr id="new_id" style="display:none"></tr>
  <tr>
    <td>
      <b>cell after</b>
    </td>
    <td>
        <b>cell after</b>
    </td>

</tr>
 </tbody></table>

JQuery的

$( "table" ).on( "click", "td", function() {
  var new_trs=$('<tr><td>New 1st Tr</td><td>New 2nd Tr</td></tr>');
  $("#new_id").after(new_trs);
});

DEMO

加载的表行没有表类的css

1 个答案: