So ändern Sie nur Text in td der Tabelle Tabelle mit JQuery

Question

Ich versuche, den Text in einer Zelle zu aktualisieren, die auch ein Eingabefeld enthält. In der Zeile $(ib).closest('td').prop('textContent',888); gebe ich dem Text den Wert 888 zu, aber dies führt zur Zuweisung des Zellentextes zu "888", aber auch aus irgendeinem Grund zum Löschen des Eingabefeldes.

Mein Code (Django-Vorlage):

{% extends "base.html" %} 
{% block head_scripts %} 
<script type="text/javascript" src="/static/script/api_recs.js"></script> 
<script type="text/javascript" src="/static/script/site_filter.js"></script> 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/> 

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 

{% endblock %} 

{% block title %} 
Schedule Match 
{% endblock %} 

{% block styles %} 
<style type="text/css"> 
    tfoot { 
     display: table-header-group; 
    } 

</style> 
{% endblock %} 

{% block content %} 

<table id='pm_table' class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      {% for col_name in table_headers%} 
      <th>{{col_name}}</th> 
      {% endfor %} 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      {% for col_name in table_headers%} 
      <th>{{col_name}}</th> 
      {% endfor %} 
     </tr> 
    </tfoot> 
    <tbody> 
     {% for data_row in table_data%} 
     <tr> 
      {% for item in data_row%} 
      <td>{{item}}</td> 
      {% endfor%} 
     </tr> 
     {% endfor %} 
    </tbody> 
</table> 

<script> 
$(document).ready(function() { 
    var SITE_ID_COL = 0; 
    var PRIORITY_COL = 3; 
    var IS_SCHEDULED_COL = 4; 

    // priority input box 
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").each(function() { 

     // $(this).children().css('visibility', 'hidden'); 
     $(this).css('text-align', 'center'); 
     // $(this).css('font-size', 0); 

     var $input_box = $('<input type="text" class="priority_changed" />') 
     $input_box.prop('value', $(this).text()); 
     $input_box.prop('size', 1); 
     $input_box.css('text-align', 'center'); 
     $input_box.prependTo(this); 
    }); 
    // remember old value of input box 
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").on('focus', '.priority_changed', function() { 
     this.old_val = this.value; 

    }); 
    // priority input box listener 
    $('#pm_table').on('change', '.priority_changed', function() { 
     var $changed_tr = $(this).closest('td').closest('tr'); 
     var site_id = $changed_tr.children().eq(SITE_ID_COL).text(); 
     var old_val = parseInt($(this).closest('td').text()); 
     var ib = this; 

     // confirm change 
     if (!confirm('Change priority for site ' + site_id + ' from ' + this.old_val + ' to ' + this.value + " ?")) { 
      //revert input box value 
      $(this).prop('value', this.old_val); 
     } else { 
      // make the change in db 
      new_val = this.value; 
      var url = '/api/manage/schedule_match/set_priority/' + site_id + '/' + new_val + '/'; 

      $.ajax({ 
       type: 'POST', 
       url: url, 
       success: function(result) { 
        res = JSON.parse(result) // todo read res 
        alert('SUCCESSFULLY changed priority for site ' + site_id + ' from ' + ib.old_val + ' to ' + res.new_val + "."); 
        $(ib).closest('td').prop('textContent',888); 



       }, 
       error: function() { 
        alert('ERROR updating database!'); 
        //revert input box state 
        $(ib).prop('value', ib.old_val); 
       }, 
      }); 
     } 
    });  
</script> 
{% endblock %} 

habe ich versucht, $(ib).closest('td').text(888); und viele andere Eigenschaften wie innertext, innerhtml, $(ib).closest('td').childNodes[1].prop('text',888) aber ohne Ergebnis in die richtige Richtung. Was mache ich hier falsch?

Answer 1

Sie sollten Ihre Vorlage ändern, um eine span innerhalb td zu haben. Wie:

<tbody> 
    {% for data_row in table_data%} 
    <tr> 
     {% for item in data_row%} 
     <td><span>{{item}}</span></td> 
     {% endfor%} 
    </tr> 
    {% endfor %} 
</tbody> 

Dann können Sie $(ib).closest('td').children('span').text(888), um den Text zu ändern, ohne das Eingabefeld zu löschen.