title: How to hide text rendered by DataTables 1.09 in <td>?
body: <p>I'm rendering a custom DataTable (version 1.09) and need to replace or otherwise cover up the text of the cell when a user clicks the "edit" button belonging to the row to show an input box that the user can manipulate this data in. </p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/ZHlMw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZHlMw.png" alt="Input box and TD text are in the same cell"></a></p>
  
  <p>The way I'm handling the input box being rendered is inside of the "fnCreatedCell" function, and the visibility is currently being toggled on button click by toggling a CSS class on it to hide it.</p>
  
  <p>I was considering looping identifying the table row the button is attached to and looping through the cells on the row and hiding them, but this destroys the styling of the table and makes it ugly. I need a way to just replace the contents or, if I could get the contents into a "span" or "div" I could apply the same visibility classes to it.</p>
  
  <p>Is there a CSS solution to hiding or otherwise replacing text inside of a  html element - but only temporarily?  </p>
  
  <p>Code Example: </p>
  
  <p>(Column Definition)</p>
  
  <pre><code>  {"mData": "suspenseDt", "sTitle": "Suspense Date", "mRender": formatDateToDisplayString,
      "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
        $(nTd).attr('id', "suspenseDt-" + oData.id);
        //$(nTd).attr('style', "visibility:hidden;");
        $(nTd).append('&lt;input class="input-small hiddenTIF ti-date-pick requiredDate suspenseDate suspenseDT120Range" value="' + sData + '" id="suspenseDtInput-' + oData.id + '"/&gt;');
      }},
  </code></pre>
  
  <p>formatDateToDisplayString function in mRender:</p>
  
  <pre><code>function formatDateToDisplayString(date) {
    if(date !== null) {
       return new Date(date).toLocaleDateString({day: "2-digit", month: "2-digit"});
    } else {
       return "";
    }
   }
  </code></pre>
  
  <p>Toggle visibility of input box (currently the input is the only content with class "hiddenTIF" but ideally the contents of the  could have this or the  itself if destructing the formatting of the table would be avoided).</p>
  
  <pre><code> $hidden.show().removeClass("hiddenTIF").addClass("visibleTIF");
   $visible.hide().removeClass("visibleTIF").addClass("hiddenTIF");
  </code></pre>
  
  <p>Image of table column (first row has had edit button clicked, if edit button was clicked on second or third the input boxes would appear there as well)</p>
  
  <p><a href="https://i.stack.imgur.com/b72Ti.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b72Ti.png" alt="table column"></a></p>