如何在现有JQuery数据表上使用HTML更新现有行

如果您想用全新或经过修改的<tr>替换整个<tr>..</tr>，可以执行以下操作。

首先在jQuery中找到要替换的行，可以使用一些id选择器，也可以通过事件的DOM遍历：

var $row = $(this).closest("tr")

假设您有一个全新的HTML行，您想用它来替换它。这可能来自页面上某个地方的AJAX调用，或者现有行的修改版本，或者只是直接的HTML:

var newRow = $("<tr>  <td>1</td> <td>Bob</td> <td><i>23</i></td>  <tr>

如果这是一个普通的HTML表，您可以这样做.replaceWith()：

$row.replaceWith($(newRow))

Buuttt，那么DataTables不知道它，所以下次调用$dt.draw()时，它会变回来。相反，您必须将新信息传递到DataTable中，方法是在DataTables中定位行，然后将新信息交给它。

row().data()-data表示字符串值的数组，这些值是每个td 的innerHTML

因此，我们需要将上面的行转换为这样的内容：

["1","Bob","<i>23</i>"]

下面是一个将行转换为数据表数组的函数：

function TrToData(row) {
   return $(row).find('td').map(function(i,el) {
        return el.innerHTML;
   }).get();
}

所以整个事情看起来是这样的：

$('.replace').click(function () {
    var $row = $(this).closest("tr")
    var newRow = $("#newRow").find("tr")[0].outerHTML
    var newRowDataArray = TrToData(newRow)  
    $dt.row($row).data(newRowDataArray).draw();
});

jsFiddle中的演示

堆栈中的恶魔狙击手

$(function() {
	  // initialize table
    var $dt = $('#example').DataTable({
        paging:   false,
        bFilter: false, 
        bInfo: false
    });
    
 		// add row
    $('#addRow').click(function () {
        //$dt.row.add( [1,2,3] ).draw();
        var newRow = $("#newRow").find("tr")[0].outerHTML
        $dt.row.add($(newRow)).draw();
    });
    
    // replace row
    $('.replace').click(function () {
    		var $row = $(this).closest("tr")
        var newRow = $("#newRow").find("tr")[0].outerHTML
  			
        var newRowDataArray = TrToData(newRow)  
  
        //$row.replaceWith($(newRow))
        //data represents an array of string values that are the innerHTML of each td
        $dt.row($row).data(newRowDataArray).draw();
        
    });
    
    function TrToData(row) {
     	 return $(row).find('td').map(function(i,el) {
        	return el.innerHTML;
       }).get();
    }
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" >
  <thead>
    <tr>
      <th>Hidden</th>
      <th>Name</th>
      <th>Age</th>
      <th>Replace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Line 1 <input type="hidden" value="1"/> </td>
      <td>Bob    <input type="hidden" value="Bob"/> </td>
      <td><input type="text" value="18"/> </td>
      <td><input type="button" value="Replace" class="replace"/> </td>
    </tr>
  </tbody>
</table>
<br/>
<button id="addRow">Add New Row</button>
<table id="newRow" style="display:none">
  <tbody>
    <tr >
      <td>Line 2 <input type="hidden" value="2"/>   </td>
      <td>Ann    <input type="hidden" value="Ann"/> </td>
      <td><input type="text" value="21"/> </td>
      <td><input type="button" value="Replace" class="replace"/> </td>
    </tr>
  </tbody>
</table>

您可以使用jQuery来更新指定的行。为此，您需要为每一行定义唯一的id。然后通过下面的id，您可以获得table元素的对象，并通过ajax调用对其进行更新。让我用代码解释一下。这里还展示了如何操作动态链接。

function updateJobStatus() {
        $("#data-table tr.running").each(function() {
            var obj = $(this);
            var id = $(this).find('td:eq(0)').text();
            //var id1 = $(this).attr('id');
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'ajaxGetPrintJob.html',
                data: 'id=' + id,
                success: function(responseData,textStatus) {
                    if (textStatus == 'success' && responseData.length > 0) {
                        var id = responseData[0].id;
                        var tagId = responseData[0].voterListTagId;
                        var createdBy = responseData[0].createdByName;
                        var locationType = responseData[0].locationType;
                        var totalJobCount = responseData[0].totalJobCount;
                        var successCount = responseData[0].successCount;
                        var failedCount = responseData[0].failedCount;
                        var status = responseData[0].status;
                        $(obj).find('td:eq(0)').html(id);
                        $(obj).find('td:eq(1)').html('<input name="app_id" id="row'+id+ '" type="checkbox" value="'+id+'" class="case"/>');
                        $(obj).find('td:eq(2)').html('<a href="showPrintJob.html?jobId='+id+'&tagId='+tagId+'&locationType='+locationType+'&w=1024&h=700&load=true&jobName='+responseData[0].name+'" class="popup">'+responseData[0].name+'</a>');
                        $(obj).find('td:eq(3)').html(createdBy);
                        $(obj).find('td:eq(4)').html(totalJobCount);
                        $(obj).find('td:eq(5)').html(successCount);
                        $(obj).find('td:eq(6)').html(failedCount);
                        $(obj).find('td:eq(7)').html(status);
                    }
                }, error: function(responseData) {
                    unblockView();
                }
            });
        });
        setTimeout(updateJobStatus, 20000);
    }

这里updateJobStatus（）函数将通过ajax调用获取数据和操作每隔20秒触发一次。这里的数据表是指表id。

<table summary="search result" id="data-table" class="search-result" cellspacing="0" style="">

表格行应该像

<tr class="<c:if test="${loop.count % 2 !=0}"> odd-row </c:if> <c:if test="${result.status eq 'INITIALIZING'}"> running </c:if>" >