jQuery append vs html vs innerHTML list performance

JavaScript performance comparison

Revision 185 of this test case created by Tom Ledger

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="list">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var len = 500;

};
</script>

Preparation code output

<div id="list"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jquery .append()
var html='';

  html += '<div>boo
    <p class="recs-found">Found 82 records</p>
    
    <table id="vlt-categories" class="vlt" data-tablename="categories">

        <tbody><tr class="vlh">
                <th data-type="text" data-column="0" class="w500 text-muted th-text">
                    
                        <label></label>
                    
                </th>
        </tr>

            <tr class="vlr
                
                " data-row="0" data-index="568">

<td class="vli td-text">
        <input type="text" value="2013 Price rise" id="f_categories-568-name" name="categories-568-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="1" data-index="587">

<td class="vli td-text">
        <input type="text" value="AA - 15 years exclusion list (temp category)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="2" data-index="577">

<td class="vli td-text">
        <input type="text" value="AA - Art gallery mailing (BIG LIST)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="3" data-index="581">

<td class="vli td-text">
        <input type="text" value="AB - Artlogic Sites mailing (w/ Designers)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="4" data-index="471">

<td class="vli td-text">
        <input type="text" value="Architect (select)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="5" data-index="439">

<td class="vli td-text">
        <input type="text" value="Art consultant" id="f_categories-439-name" name="categories-439-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="6" data-index="5">

<td class="vli td-text">
        <input type="text" value="Art gallery" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="7" data-index="557">

<td class="vli td-text">
        <input type="text" value="ArtBase" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="8" data-index="585">

<td class="vli td-text">
        <input type="text" value="ArtBase 2014 JE import" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="9" data-index="465">

<td class="vli td-text">
        <input type="text" value="Artbase clients" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="10" data-index="531">

<td class="vli td-text">
        <input type="text" value="ArtBinder Client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="11" data-index="555">

<td class="vli td-text">
        <input type="text" value="ArtForm" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="12" data-index="461">

<td class="vli td-text">
        <input type="text" value="Artform clients" id="f_categories-461-name" name="categories-461-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="13" data-index="6">

<td class="vli td-text">
        <input type="text" value="Artist" id="f_categories-6-name" name="categories-6-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="14" data-index="447">

<td class="vli td-text">
        <input type="text" value="Artlogic Online - demonstration site users" id="f_categories-447-name" name="categories-447-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="15" data-index="453">

<td class="vli td-text">
        <input type="text" value="Artlogic Online client" id="f_categories-453-name" name="categories-453-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="16" data-index="446">

<td class="vli td-text">
        <input type="text" value="Artlogic Staff" id="f_categories-446-name" name="categories-446-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="17" data-index="571">

<td class="vli td-text">
        <input type="text" value="Artlook" id="f_categories-571-name" name="categories-571-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="18" data-index="483">

<td class="vli td-text">
        <input type="text" value="Arts Council funding recipient" id="f_categories-483-name" name="categories-483-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="19" data-index="570">

<td class="vli td-text">
        <input type="text" value="Artscene" id="f_categories-570-name" name="categories-570-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="20" data-index="556">

<td class="vli td-text">
        <input type="text" value="ArtSystems" id="f_categories-556-name" name="categories-556-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="21" data-index="586">

<td class="vli td-text">
        <input type="text" value="ArtSystems 2014 JE import" id="f_categories-586-name" name="categories-586-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="22" data-index="469">

<td class="vli td-text">
        <input type="text" value="Author" id="f_categories-469-name" name="categories-469-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="23" data-index="558">

<td class="vli td-text">
        <input type="text" value="Basic/custom Filemaker Pro" id="f_categories-558-name" name="categories-558-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="24" data-index="497">

<td class="vli td-text">
        <input type="text" value="Christmas - via facebook / text" id="f_categories-497-name" name="categories-497-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="25" data-index="418">

<td class="vli td-text">
        <input type="text" value="Christmas card (postal) list" id="f_categories-418-name" name="categories-418-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="26" data-index="436">

<td class="vli td-text">
        <input type="text" value="Christmas e-mail list (friend  - Peter and David)" id="f_categories-436-name" name="categories-436-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="27" data-index="435">

<td class="vli td-text">
        <input type="text" value="Christmas present" id="f_categories-435-name" name="categories-435-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="28" data-index="420">

<td class="vli td-text">
        <input type="text" value="Client" id="f_categories-420-name" name="categories-420-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="29" data-index="451">

<td class="vli td-text">
        <input type="text" value="Client  (former client)" id="f_categories-451-name" name="categories-451-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="30" data-index="580">

<td class="vli td-text">
        <input type="text" value="Client - PrivateViews" id="f_categories-580-name" name="categories-580-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="31" data-index="510">

<td class="vli td-text">
        <input type="text" value="Client at C4L" id="f_categories-510-name" name="categories-510-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="32" data-index="509">

<td class="vli td-text">
        <input type="text" value="Client at Coreix" id="f_categories-509-name" name="categories-509-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="33" data-index="511">

<td class="vli td-text">
        <input type="text" value="Clients at IP House" id="f_categories-511-name" name="categories-511-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="34" data-index="4">

<td class="vli td-text">
        <input type="text" value="Collector / Collection" id="f_categories-4-name" name="categories-4-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="35" data-index="485">

<td class="vli td-text">
        <input type="text" value="Critchley list" id="f_categories-485-name" name="categories-485-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="36" data-index="423">

<td class="vli td-text">
        <input type="text" value="Data /useful information (no contact details)" id="f_categories-423-name" name="categories-423-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="37" data-index="21">

<td class="vli td-text">
        <input type="text" value="Designer" id="f_categories-21-name" name="categories-21-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="38" data-index="422">

<td class="vli td-text">
        <input type="text" value="Friend / Family" id="f_categories-422-name" name="categories-422-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="39" data-index="466">

<td class="vli td-text">
        <input type="text" value="GalleryPro clients" id="f_categories-466-name" name="categories-466-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="40" data-index="579">

<td class="vli td-text">
        <input type="text" value="General Contact - dont mail - not client or supplier" id="f_categories-579-name" name="categories-579-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="41" data-index="589">

<td class="vli td-text">
        <input type="text" value="HK - Test Category" id="f_categories-589-name" name="categories-589-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="42" data-index="566">

<td class="vli td-text">
        <input type="text" value="Interior Designer" id="f_categories-566-name" name="categories-566-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="43" data-index="459">

<td class="vli td-text">
        <input type="text" value="Invoice by email / annually" id="f_categories-459-name" name="categories-459-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="44" data-index="590">

<td class="vli td-text">
        <input type="text" value="jgjhghjgg" id="f_categories-590-name" name="categories-590-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="45" data-index="464">

<td class="vli td-text">
        <input type="text" value="Job applicant - demo system" id="f_categories-464-name" name="categories-464-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="46" data-index="524">

<td class="vli td-text">
        <input type="text" value="Joe pre-existing contacts" id="f_categories-524-name" name="categories-524-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="47" data-index="588">

<td class="vli td-text">
        <input type="text" value="just robin" id="f_categories-588-name" name="categories-588-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="48" data-index="244">

<td class="vli td-text">
        <input type="text" value="Main contact for client or department" id="f_categories-244-name" name="categories-244-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="49" data-index="496">

<td class="vli td-text">
        <input type="text" value="Managed Artwork clients" id="f_categories-496-name" name="categories-496-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="50" data-index="584">

<td class="vli td-text">
        <input type="text" value="Michael test" id="f_categories-584-name" name="categories-584-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="51" data-index="15">

<td class="vli td-text">
        <input type="text" value="Multi-national" id="f_categories-15-name" name="categories-15-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="52" data-index="14">

<td class="vli td-text">
        <input type="text" value="Multiple locations" id="f_categories-14-name" name="categories-14-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="53" data-index="425">

<td class="vli td-text">
        <input type="text" value="Other" id="f_categories-425-name" name="categories-425-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="54" data-index="438">

<td class="vli td-text">
        <input type="text" value="Party list" id="f_categories-438-name" name="categories-438-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="55" data-index="454">

<td class="vli td-text">
        <input type="text" value="Peter &amp; David" id="f_categories-454-name" name="categories-454-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="56" data-index="445">

<td class="vli td-text">
        <input type="text" value="Peter only - for testing" id="f_categories-445-name" name="categories-445-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="57" data-index="434">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic for Artist client" id="f_categories-434-name" name="categories-434-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="58" data-index="431">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic Online client" id="f_categories-431-name" name="categories-431-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="59" data-index="26">

<td class="vli td-text">
        <input type="text" value="Potential interactive client" id="f_categories-26-name" name="categories-26-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="60" data-index="27">

<td class="vli td-text">
        <input type="text" value="Potential mailing list client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="61" data-index="576">

<td class="vli td-text">
        <input type="text" value="Potential website client (art)" id="f_categories-576-name" name="categories-576-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="62" data-index="575">

<td class="vli td-text">
        <input type="text" value="Potential website client (non-art)" id="f_categories-575-name" name="categories-575-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="63" data-index="16">

<td class="vli td-text">
        <input type="text" value="Private individual" id="f_categories-16-name" name="categories-16-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="64" data-index="523">

<td class="vli td-text">
        <input type="text" value="Private Views - Art Systems iPad client" id="f_categories-523-name" name="categories-523-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="65" data-index="522">

<td class="vli td-text">
        <input type="text" value="Private Views - Artbinder clients" id="f_categories-522-name" name="categories-522-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="66" data-index="521">

<td class="vli td-text">
        <input type="text" value="Private Views - Artlogic to contact first" id="f_categories-521-name" name="categories-521-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="67" data-index="537">

<td class="vli td-text">
        <input type="text" value="PrivateViews - Free Trial" id="f_categories-537-name" name="categories-537-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="68" data-index="538">

<td class="vli td-text">
        <input type="text" value="PrivateViews - non-sassy account holder" id="f_categories-538-name" name="categories-538-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="69" data-index="25">

<td class="vli td-text">
        <input type="text" value="Prospective database/small online solution client" id="f_categories-25-name" name="categories-25-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="70" data-index="24">

<td class="vli td-text">
        <input type="text" value="Prospective web client" id="f_categories-24-name" name="categories-24-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="71" data-index="426">

<td class="vli td-text">
        <input type="text" value="Quarterly invoice" id="f_categories-426-name" name="categories-426-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="72" data-index="492">

<td class="vli td-text">
        <input type="text" value="Reading Room clients" id="f_categories-492-name" name="categories-492-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="73" data-index="583">

<td class="vli td-text">
        <input type="text" value="Sales - Art fair visit from Joe" id="f_categories-583-name" name="categories-583-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="74" data-index="582">

<td class="vli td-text">
        <input type="text" value="Sales - Cold call from Joe" id="f_categories-582-name" name="categories-582-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="75" data-index="40">

<td class="vli td-text">
        <input type="text" value="Spammer - they have spammed us" id="f_categories-40-name" name="categories-40-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="76" data-index="424">

<td class="vli td-text">
        <input type="text" value="Supplier / Service / tradesman for Peter and David" id="f_categories-424-name" name="categories-424-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="77" data-index="421">

<td class="vli td-text">
        <input type="text" value="Supplier for Artlogic" id="f_categories-421-name" name="categories-421-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="78" data-index="489">

<td class="vli td-text">
        <input type="text" value="Test" id="f_categories-489-name" name="categories-489-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="79" data-index="428">

<td class="vli td-text">
        <input type="text" value="Web / IT consultant" id="f_categories-428-name" name="categories-428-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="80" data-index="10">

<td class="vli td-text">
        <input type="text" value="Website client - BESPOKE" id="f_categories-10-name" name="categories-10-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="81" data-index="574">

<td class="vli td-text">
        <input type="text" value="Website client - TEMPLATE" id="f_categories-574-name" name="categories-574-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>

            <tr class="vlr">

<td class="vli td-text">
        <input type="text" value="" name="categories--name" class="f f-text f-w-full">
</td>
            </tr>
        
    </tbody></table>
</div>';


$('#list').empty().append(html);
pending…
jQuery .html()
var html='';

  html += '<div>boo
    <p class="recs-found">Found 82 records</p>
    
    <table id="vlt-categories" class="vlt" data-tablename="categories">

        <tbody><tr class="vlh">
                <th data-type="text" data-column="0" class="w500 text-muted th-text">
                    
                        <label></label>
                    
                </th>
        </tr>

            <tr class="vlr
                
                " data-row="0" data-index="568">

<td class="vli td-text">
        <input type="text" value="2013 Price rise" id="f_categories-568-name" name="categories-568-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="1" data-index="587">

<td class="vli td-text">
        <input type="text" value="AA - 15 years exclusion list (temp category)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="2" data-index="577">

<td class="vli td-text">
        <input type="text" value="AA - Art gallery mailing (BIG LIST)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="3" data-index="581">

<td class="vli td-text">
        <input type="text" value="AB - Artlogic Sites mailing (w/ Designers)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="4" data-index="471">

<td class="vli td-text">
        <input type="text" value="Architect (select)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="5" data-index="439">

<td class="vli td-text">
        <input type="text" value="Art consultant" id="f_categories-439-name" name="categories-439-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="6" data-index="5">

<td class="vli td-text">
        <input type="text" value="Art gallery" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="7" data-index="557">

<td class="vli td-text">
        <input type="text" value="ArtBase" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="8" data-index="585">

<td class="vli td-text">
        <input type="text" value="ArtBase 2014 JE import" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="9" data-index="465">

<td class="vli td-text">
        <input type="text" value="Artbase clients" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="10" data-index="531">

<td class="vli td-text">
        <input type="text" value="ArtBinder Client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="11" data-index="555">

<td class="vli td-text">
        <input type="text" value="ArtForm" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="12" data-index="461">

<td class="vli td-text">
        <input type="text" value="Artform clients" id="f_categories-461-name" name="categories-461-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="13" data-index="6">

<td class="vli td-text">
        <input type="text" value="Artist" id="f_categories-6-name" name="categories-6-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="14" data-index="447">

<td class="vli td-text">
        <input type="text" value="Artlogic Online - demonstration site users" id="f_categories-447-name" name="categories-447-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="15" data-index="453">

<td class="vli td-text">
        <input type="text" value="Artlogic Online client" id="f_categories-453-name" name="categories-453-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="16" data-index="446">

<td class="vli td-text">
        <input type="text" value="Artlogic Staff" id="f_categories-446-name" name="categories-446-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="17" data-index="571">

<td class="vli td-text">
        <input type="text" value="Artlook" id="f_categories-571-name" name="categories-571-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="18" data-index="483">

<td class="vli td-text">
        <input type="text" value="Arts Council funding recipient" id="f_categories-483-name" name="categories-483-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="19" data-index="570">

<td class="vli td-text">
        <input type="text" value="Artscene" id="f_categories-570-name" name="categories-570-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="20" data-index="556">

<td class="vli td-text">
        <input type="text" value="ArtSystems" id="f_categories-556-name" name="categories-556-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="21" data-index="586">

<td class="vli td-text">
        <input type="text" value="ArtSystems 2014 JE import" id="f_categories-586-name" name="categories-586-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="22" data-index="469">

<td class="vli td-text">
        <input type="text" value="Author" id="f_categories-469-name" name="categories-469-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="23" data-index="558">

<td class="vli td-text">
        <input type="text" value="Basic/custom Filemaker Pro" id="f_categories-558-name" name="categories-558-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="24" data-index="497">

<td class="vli td-text">
        <input type="text" value="Christmas - via facebook / text" id="f_categories-497-name" name="categories-497-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="25" data-index="418">

<td class="vli td-text">
        <input type="text" value="Christmas card (postal) list" id="f_categories-418-name" name="categories-418-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="26" data-index="436">

<td class="vli td-text">
        <input type="text" value="Christmas e-mail list (friend  - Peter and David)" id="f_categories-436-name" name="categories-436-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="27" data-index="435">

<td class="vli td-text">
        <input type="text" value="Christmas present" id="f_categories-435-name" name="categories-435-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="28" data-index="420">

<td class="vli td-text">
        <input type="text" value="Client" id="f_categories-420-name" name="categories-420-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="29" data-index="451">

<td class="vli td-text">
        <input type="text" value="Client  (former client)" id="f_categories-451-name" name="categories-451-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="30" data-index="580">

<td class="vli td-text">
        <input type="text" value="Client - PrivateViews" id="f_categories-580-name" name="categories-580-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="31" data-index="510">

<td class="vli td-text">
        <input type="text" value="Client at C4L" id="f_categories-510-name" name="categories-510-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="32" data-index="509">

<td class="vli td-text">
        <input type="text" value="Client at Coreix" id="f_categories-509-name" name="categories-509-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="33" data-index="511">

<td class="vli td-text">
        <input type="text" value="Clients at IP House" id="f_categories-511-name" name="categories-511-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="34" data-index="4">

<td class="vli td-text">
        <input type="text" value="Collector / Collection" id="f_categories-4-name" name="categories-4-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="35" data-index="485">

<td class="vli td-text">
        <input type="text" value="Critchley list" id="f_categories-485-name" name="categories-485-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="36" data-index="423">

<td class="vli td-text">
        <input type="text" value="Data /useful information (no contact details)" id="f_categories-423-name" name="categories-423-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="37" data-index="21">

<td class="vli td-text">
        <input type="text" value="Designer" id="f_categories-21-name" name="categories-21-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="38" data-index="422">

<td class="vli td-text">
        <input type="text" value="Friend / Family" id="f_categories-422-name" name="categories-422-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="39" data-index="466">

<td class="vli td-text">
        <input type="text" value="GalleryPro clients" id="f_categories-466-name" name="categories-466-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="40" data-index="579">

<td class="vli td-text">
        <input type="text" value="General Contact - dont mail - not client or supplier" id="f_categories-579-name" name="categories-579-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="41" data-index="589">

<td class="vli td-text">
        <input type="text" value="HK - Test Category" id="f_categories-589-name" name="categories-589-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="42" data-index="566">

<td class="vli td-text">
        <input type="text" value="Interior Designer" id="f_categories-566-name" name="categories-566-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="43" data-index="459">

<td class="vli td-text">
        <input type="text" value="Invoice by email / annually" id="f_categories-459-name" name="categories-459-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="44" data-index="590">

<td class="vli td-text">
        <input type="text" value="jgjhghjgg" id="f_categories-590-name" name="categories-590-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="45" data-index="464">

<td class="vli td-text">
        <input type="text" value="Job applicant - demo system" id="f_categories-464-name" name="categories-464-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="46" data-index="524">

<td class="vli td-text">
        <input type="text" value="Joe pre-existing contacts" id="f_categories-524-name" name="categories-524-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="47" data-index="588">

<td class="vli td-text">
        <input type="text" value="just robin" id="f_categories-588-name" name="categories-588-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="48" data-index="244">

<td class="vli td-text">
        <input type="text" value="Main contact for client or department" id="f_categories-244-name" name="categories-244-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="49" data-index="496">

<td class="vli td-text">
        <input type="text" value="Managed Artwork clients" id="f_categories-496-name" name="categories-496-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="50" data-index="584">

<td class="vli td-text">
        <input type="text" value="Michael test" id="f_categories-584-name" name="categories-584-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="51" data-index="15">

<td class="vli td-text">
        <input type="text" value="Multi-national" id="f_categories-15-name" name="categories-15-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="52" data-index="14">

<td class="vli td-text">
        <input type="text" value="Multiple locations" id="f_categories-14-name" name="categories-14-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="53" data-index="425">

<td class="vli td-text">
        <input type="text" value="Other" id="f_categories-425-name" name="categories-425-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="54" data-index="438">

<td class="vli td-text">
        <input type="text" value="Party list" id="f_categories-438-name" name="categories-438-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="55" data-index="454">

<td class="vli td-text">
        <input type="text" value="Peter &amp; David" id="f_categories-454-name" name="categories-454-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="56" data-index="445">

<td class="vli td-text">
        <input type="text" value="Peter only - for testing" id="f_categories-445-name" name="categories-445-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="57" data-index="434">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic for Artist client" id="f_categories-434-name" name="categories-434-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="58" data-index="431">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic Online client" id="f_categories-431-name" name="categories-431-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="59" data-index="26">

<td class="vli td-text">
        <input type="text" value="Potential interactive client" id="f_categories-26-name" name="categories-26-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="60" data-index="27">

<td class="vli td-text">
        <input type="text" value="Potential mailing list client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="61" data-index="576">

<td class="vli td-text">
        <input type="text" value="Potential website client (art)" id="f_categories-576-name" name="categories-576-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="62" data-index="575">

<td class="vli td-text">
        <input type="text" value="Potential website client (non-art)" id="f_categories-575-name" name="categories-575-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="63" data-index="16">

<td class="vli td-text">
        <input type="text" value="Private individual" id="f_categories-16-name" name="categories-16-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="64" data-index="523">

<td class="vli td-text">
        <input type="text" value="Private Views - Art Systems iPad client" id="f_categories-523-name" name="categories-523-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="65" data-index="522">

<td class="vli td-text">
        <input type="text" value="Private Views - Artbinder clients" id="f_categories-522-name" name="categories-522-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="66" data-index="521">

<td class="vli td-text">
        <input type="text" value="Private Views - Artlogic to contact first" id="f_categories-521-name" name="categories-521-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="67" data-index="537">

<td class="vli td-text">
        <input type="text" value="PrivateViews - Free Trial" id="f_categories-537-name" name="categories-537-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="68" data-index="538">

<td class="vli td-text">
        <input type="text" value="PrivateViews - non-sassy account holder" id="f_categories-538-name" name="categories-538-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="69" data-index="25">

<td class="vli td-text">
        <input type="text" value="Prospective database/small online solution client" id="f_categories-25-name" name="categories-25-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="70" data-index="24">

<td class="vli td-text">
        <input type="text" value="Prospective web client" id="f_categories-24-name" name="categories-24-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="71" data-index="426">

<td class="vli td-text">
        <input type="text" value="Quarterly invoice" id="f_categories-426-name" name="categories-426-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="72" data-index="492">

<td class="vli td-text">
        <input type="text" value="Reading Room clients" id="f_categories-492-name" name="categories-492-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="73" data-index="583">

<td class="vli td-text">
        <input type="text" value="Sales - Art fair visit from Joe" id="f_categories-583-name" name="categories-583-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="74" data-index="582">

<td class="vli td-text">
        <input type="text" value="Sales - Cold call from Joe" id="f_categories-582-name" name="categories-582-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="75" data-index="40">

<td class="vli td-text">
        <input type="text" value="Spammer - they have spammed us" id="f_categories-40-name" name="categories-40-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="76" data-index="424">

<td class="vli td-text">
        <input type="text" value="Supplier / Service / tradesman for Peter and David" id="f_categories-424-name" name="categories-424-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="77" data-index="421">

<td class="vli td-text">
        <input type="text" value="Supplier for Artlogic" id="f_categories-421-name" name="categories-421-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="78" data-index="489">

<td class="vli td-text">
        <input type="text" value="Test" id="f_categories-489-name" name="categories-489-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="79" data-index="428">

<td class="vli td-text">
        <input type="text" value="Web / IT consultant" id="f_categories-428-name" name="categories-428-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="80" data-index="10">

<td class="vli td-text">
        <input type="text" value="Website client - BESPOKE" id="f_categories-10-name" name="categories-10-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="81" data-index="574">

<td class="vli td-text">
        <input type="text" value="Website client - TEMPLATE" id="f_categories-574-name" name="categories-574-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>

            <tr class="vlr">

<td class="vli td-text">
        <input type="text" value="" name="categories--name" class="f f-text f-w-full">
</td>
            </tr>
        
    </tbody></table>
</div>';


$('#list').html(html);
pending…
javascript innerHTML
var html='';

  html += '<div>boo
    <p class="recs-found">Found 82 records</p>
    
    <table id="vlt-categories" class="vlt" data-tablename="categories">

        <tbody><tr class="vlh">
                <th data-type="text" data-column="0" class="w500 text-muted th-text">
                    
                        <label></label>
                    
                </th>
        </tr>

            <tr class="vlr
                
                " data-row="0" data-index="568">

<td class="vli td-text">
        <input type="text" value="2013 Price rise" id="f_categories-568-name" name="categories-568-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="1" data-index="587">

<td class="vli td-text">
        <input type="text" value="AA - 15 years exclusion list (temp category)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="2" data-index="577">

<td class="vli td-text">
        <input type="text" value="AA - Art gallery mailing (BIG LIST)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="3" data-index="581">

<td class="vli td-text">
        <input type="text" value="AB - Artlogic Sites mailing (w/ Designers)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="4" data-index="471">

<td class="vli td-text">
        <input type="text" value="Architect (select)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="5" data-index="439">

<td class="vli td-text">
        <input type="text" value="Art consultant" id="f_categories-439-name" name="categories-439-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="6" data-index="5">

<td class="vli td-text">
        <input type="text" value="Art gallery" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="7" data-index="557">

<td class="vli td-text">
        <input type="text" value="ArtBase" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="8" data-index="585">

<td class="vli td-text">
        <input type="text" value="ArtBase 2014 JE import" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="9" data-index="465">

<td class="vli td-text">
        <input type="text" value="Artbase clients" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="10" data-index="531">

<td class="vli td-text">
        <input type="text" value="ArtBinder Client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="11" data-index="555">

<td class="vli td-text">
        <input type="text" value="ArtForm" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="12" data-index="461">

<td class="vli td-text">
        <input type="text" value="Artform clients" id="f_categories-461-name" name="categories-461-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="13" data-index="6">

<td class="vli td-text">
        <input type="text" value="Artist" id="f_categories-6-name" name="categories-6-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="14" data-index="447">

<td class="vli td-text">
        <input type="text" value="Artlogic Online - demonstration site users" id="f_categories-447-name" name="categories-447-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="15" data-index="453">

<td class="vli td-text">
        <input type="text" value="Artlogic Online client" id="f_categories-453-name" name="categories-453-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="16" data-index="446">

<td class="vli td-text">
        <input type="text" value="Artlogic Staff" id="f_categories-446-name" name="categories-446-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="17" data-index="571">

<td class="vli td-text">
        <input type="text" value="Artlook" id="f_categories-571-name" name="categories-571-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="18" data-index="483">

<td class="vli td-text">
        <input type="text" value="Arts Council funding recipient" id="f_categories-483-name" name="categories-483-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="19" data-index="570">

<td class="vli td-text">
        <input type="text" value="Artscene" id="f_categories-570-name" name="categories-570-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="20" data-index="556">

<td class="vli td-text">
        <input type="text" value="ArtSystems" id="f_categories-556-name" name="categories-556-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="21" data-index="586">

<td class="vli td-text">
        <input type="text" value="ArtSystems 2014 JE import" id="f_categories-586-name" name="categories-586-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="22" data-index="469">

<td class="vli td-text">
        <input type="text" value="Author" id="f_categories-469-name" name="categories-469-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="23" data-index="558">

<td class="vli td-text">
        <input type="text" value="Basic/custom Filemaker Pro" id="f_categories-558-name" name="categories-558-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="24" data-index="497">

<td class="vli td-text">
        <input type="text" value="Christmas - via facebook / text" id="f_categories-497-name" name="categories-497-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="25" data-index="418">

<td class="vli td-text">
        <input type="text" value="Christmas card (postal) list" id="f_categories-418-name" name="categories-418-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="26" data-index="436">

<td class="vli td-text">
        <input type="text" value="Christmas e-mail list (friend  - Peter and David)" id="f_categories-436-name" name="categories-436-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="27" data-index="435">

<td class="vli td-text">
        <input type="text" value="Christmas present" id="f_categories-435-name" name="categories-435-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="28" data-index="420">

<td class="vli td-text">
        <input type="text" value="Client" id="f_categories-420-name" name="categories-420-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="29" data-index="451">

<td class="vli td-text">
        <input type="text" value="Client  (former client)" id="f_categories-451-name" name="categories-451-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="30" data-index="580">

<td class="vli td-text">
        <input type="text" value="Client - PrivateViews" id="f_categories-580-name" name="categories-580-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="31" data-index="510">

<td class="vli td-text">
        <input type="text" value="Client at C4L" id="f_categories-510-name" name="categories-510-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="32" data-index="509">

<td class="vli td-text">
        <input type="text" value="Client at Coreix" id="f_categories-509-name" name="categories-509-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="33" data-index="511">

<td class="vli td-text">
        <input type="text" value="Clients at IP House" id="f_categories-511-name" name="categories-511-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="34" data-index="4">

<td class="vli td-text">
        <input type="text" value="Collector / Collection" id="f_categories-4-name" name="categories-4-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="35" data-index="485">

<td class="vli td-text">
        <input type="text" value="Critchley list" id="f_categories-485-name" name="categories-485-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="36" data-index="423">

<td class="vli td-text">
        <input type="text" value="Data /useful information (no contact details)" id="f_categories-423-name" name="categories-423-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="37" data-index="21">

<td class="vli td-text">
        <input type="text" value="Designer" id="f_categories-21-name" name="categories-21-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="38" data-index="422">

<td class="vli td-text">
        <input type="text" value="Friend / Family" id="f_categories-422-name" name="categories-422-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="39" data-index="466">

<td class="vli td-text">
        <input type="text" value="GalleryPro clients" id="f_categories-466-name" name="categories-466-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="40" data-index="579">

<td class="vli td-text">
        <input type="text" value="General Contact - dont mail - not client or supplier" id="f_categories-579-name" name="categories-579-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="41" data-index="589">

<td class="vli td-text">
        <input type="text" value="HK - Test Category" id="f_categories-589-name" name="categories-589-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="42" data-index="566">

<td class="vli td-text">
        <input type="text" value="Interior Designer" id="f_categories-566-name" name="categories-566-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="43" data-index="459">

<td class="vli td-text">
        <input type="text" value="Invoice by email / annually" id="f_categories-459-name" name="categories-459-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="44" data-index="590">

<td class="vli td-text">
        <input type="text" value="jgjhghjgg" id="f_categories-590-name" name="categories-590-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="45" data-index="464">

<td class="vli td-text">
        <input type="text" value="Job applicant - demo system" id="f_categories-464-name" name="categories-464-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="46" data-index="524">

<td class="vli td-text">
        <input type="text" value="Joe pre-existing contacts" id="f_categories-524-name" name="categories-524-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="47" data-index="588">

<td class="vli td-text">
        <input type="text" value="just robin" id="f_categories-588-name" name="categories-588-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="48" data-index="244">

<td class="vli td-text">
        <input type="text" value="Main contact for client or department" id="f_categories-244-name" name="categories-244-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="49" data-index="496">

<td class="vli td-text">
        <input type="text" value="Managed Artwork clients" id="f_categories-496-name" name="categories-496-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="50" data-index="584">

<td class="vli td-text">
        <input type="text" value="Michael test" id="f_categories-584-name" name="categories-584-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="51" data-index="15">

<td class="vli td-text">
        <input type="text" value="Multi-national" id="f_categories-15-name" name="categories-15-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="52" data-index="14">

<td class="vli td-text">
        <input type="text" value="Multiple locations" id="f_categories-14-name" name="categories-14-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="53" data-index="425">

<td class="vli td-text">
        <input type="text" value="Other" id="f_categories-425-name" name="categories-425-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="54" data-index="438">

<td class="vli td-text">
        <input type="text" value="Party list" id="f_categories-438-name" name="categories-438-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="55" data-index="454">

<td class="vli td-text">
        <input type="text" value="Peter &amp; David" id="f_categories-454-name" name="categories-454-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="56" data-index="445">

<td class="vli td-text">
        <input type="text" value="Peter only - for testing" id="f_categories-445-name" name="categories-445-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="57" data-index="434">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic for Artist client" id="f_categories-434-name" name="categories-434-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="58" data-index="431">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic Online client" id="f_categories-431-name" name="categories-431-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="59" data-index="26">

<td class="vli td-text">
        <input type="text" value="Potential interactive client" id="f_categories-26-name" name="categories-26-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="60" data-index="27">

<td class="vli td-text">
        <input type="text" value="Potential mailing list client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="61" data-index="576">

<td class="vli td-text">
        <input type="text" value="Potential website client (art)" id="f_categories-576-name" name="categories-576-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="62" data-index="575">

<td class="vli td-text">
        <input type="text" value="Potential website client (non-art)" id="f_categories-575-name" name="categories-575-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="63" data-index="16">

<td class="vli td-text">
        <input type="text" value="Private individual" id="f_categories-16-name" name="categories-16-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="64" data-index="523">

<td class="vli td-text">
        <input type="text" value="Private Views - Art Systems iPad client" id="f_categories-523-name" name="categories-523-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="65" data-index="522">

<td class="vli td-text">
        <input type="text" value="Private Views - Artbinder clients" id="f_categories-522-name" name="categories-522-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="66" data-index="521">

<td class="vli td-text">
        <input type="text" value="Private Views - Artlogic to contact first" id="f_categories-521-name" name="categories-521-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="67" data-index="537">

<td class="vli td-text">
        <input type="text" value="PrivateViews - Free Trial" id="f_categories-537-name" name="categories-537-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="68" data-index="538">

<td class="vli td-text">
        <input type="text" value="PrivateViews - non-sassy account holder" id="f_categories-538-name" name="categories-538-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="69" data-index="25">

<td class="vli td-text">
        <input type="text" value="Prospective database/small online solution client" id="f_categories-25-name" name="categories-25-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="70" data-index="24">

<td class="vli td-text">
        <input type="text" value="Prospective web client" id="f_categories-24-name" name="categories-24-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="71" data-index="426">

<td class="vli td-text">
        <input type="text" value="Quarterly invoice" id="f_categories-426-name" name="categories-426-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="72" data-index="492">

<td class="vli td-text">
        <input type="text" value="Reading Room clients" id="f_categories-492-name" name="categories-492-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="73" data-index="583">

<td class="vli td-text">
        <input type="text" value="Sales - Art fair visit from Joe" id="f_categories-583-name" name="categories-583-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="74" data-index="582">

<td class="vli td-text">
        <input type="text" value="Sales - Cold call from Joe" id="f_categories-582-name" name="categories-582-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="75" data-index="40">

<td class="vli td-text">
        <input type="text" value="Spammer - they have spammed us" id="f_categories-40-name" name="categories-40-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="76" data-index="424">

<td class="vli td-text">
        <input type="text" value="Supplier / Service / tradesman for Peter and David" id="f_categories-424-name" name="categories-424-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="77" data-index="421">

<td class="vli td-text">
        <input type="text" value="Supplier for Artlogic" id="f_categories-421-name" name="categories-421-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="78" data-index="489">

<td class="vli td-text">
        <input type="text" value="Test" id="f_categories-489-name" name="categories-489-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="79" data-index="428">

<td class="vli td-text">
        <input type="text" value="Web / IT consultant" id="f_categories-428-name" name="categories-428-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="80" data-index="10">

<td class="vli td-text">
        <input type="text" value="Website client - BESPOKE" id="f_categories-10-name" name="categories-10-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="81" data-index="574">

<td class="vli td-text">
        <input type="text" value="Website client - TEMPLATE" id="f_categories-574-name" name="categories-574-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>

            <tr class="vlr">

<td class="vli td-text">
        <input type="text" value="" name="categories--name" class="f f-text f-w-full">
</td>
            </tr>
        
    </tbody></table>
</div>';


document.getElementById('list').innerHTML = html;
pending…
jquery + innerhtml
var html='';

  html += '<div>boo
    <p class="recs-found">Found 82 records</p>
    
    <table id="vlt-categories" class="vlt" data-tablename="categories">

        <tbody><tr class="vlh">
                <th data-type="text" data-column="0" class="w500 text-muted th-text">
                    
                        <label></label>
                    
                </th>
        </tr>

            <tr class="vlr
                
                " data-row="0" data-index="568">

<td class="vli td-text">
        <input type="text" value="2013 Price rise" id="f_categories-568-name" name="categories-568-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="1" data-index="587">

<td class="vli td-text">
        <input type="text" value="AA - 15 years exclusion list (temp category)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="2" data-index="577">

<td class="vli td-text">
        <input type="text" value="AA - Art gallery mailing (BIG LIST)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="3" data-index="581">

<td class="vli td-text">
        <input type="text" value="AB - Artlogic Sites mailing (w/ Designers)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="4" data-index="471">

<td class="vli td-text">
        <input type="text" value="Architect (select)" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="5" data-index="439">

<td class="vli td-text">
        <input type="text" value="Art consultant" id="f_categories-439-name" name="categories-439-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="6" data-index="5">

<td class="vli td-text">
        <input type="text" value="Art gallery" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="7" data-index="557">

<td class="vli td-text">
        <input type="text" value="ArtBase" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="8" data-index="585">

<td class="vli td-text">
        <input type="text" value="ArtBase 2014 JE import" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="9" data-index="465">

<td class="vli td-text">
        <input type="text" value="Artbase clients" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="10" data-index="531">

<td class="vli td-text">
        <input type="text" value="ArtBinder Client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="11" data-index="555">

<td class="vli td-text">
        <input type="text" value="ArtForm" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="12" data-index="461">

<td class="vli td-text">
        <input type="text" value="Artform clients" id="f_categories-461-name" name="categories-461-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="13" data-index="6">

<td class="vli td-text">
        <input type="text" value="Artist" id="f_categories-6-name" name="categories-6-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="14" data-index="447">

<td class="vli td-text">
        <input type="text" value="Artlogic Online - demonstration site users" id="f_categories-447-name" name="categories-447-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="15" data-index="453">

<td class="vli td-text">
        <input type="text" value="Artlogic Online client" id="f_categories-453-name" name="categories-453-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="16" data-index="446">

<td class="vli td-text">
        <input type="text" value="Artlogic Staff" id="f_categories-446-name" name="categories-446-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="17" data-index="571">

<td class="vli td-text">
        <input type="text" value="Artlook" id="f_categories-571-name" name="categories-571-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="18" data-index="483">

<td class="vli td-text">
        <input type="text" value="Arts Council funding recipient" id="f_categories-483-name" name="categories-483-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="19" data-index="570">

<td class="vli td-text">
        <input type="text" value="Artscene" id="f_categories-570-name" name="categories-570-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="20" data-index="556">

<td class="vli td-text">
        <input type="text" value="ArtSystems" id="f_categories-556-name" name="categories-556-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="21" data-index="586">

<td class="vli td-text">
        <input type="text" value="ArtSystems 2014 JE import" id="f_categories-586-name" name="categories-586-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="22" data-index="469">

<td class="vli td-text">
        <input type="text" value="Author" id="f_categories-469-name" name="categories-469-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="23" data-index="558">

<td class="vli td-text">
        <input type="text" value="Basic/custom Filemaker Pro" id="f_categories-558-name" name="categories-558-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="24" data-index="497">

<td class="vli td-text">
        <input type="text" value="Christmas - via facebook / text" id="f_categories-497-name" name="categories-497-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="25" data-index="418">

<td class="vli td-text">
        <input type="text" value="Christmas card (postal) list" id="f_categories-418-name" name="categories-418-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="26" data-index="436">

<td class="vli td-text">
        <input type="text" value="Christmas e-mail list (friend  - Peter and David)" id="f_categories-436-name" name="categories-436-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="27" data-index="435">

<td class="vli td-text">
        <input type="text" value="Christmas present" id="f_categories-435-name" name="categories-435-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="28" data-index="420">

<td class="vli td-text">
        <input type="text" value="Client" id="f_categories-420-name" name="categories-420-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="29" data-index="451">

<td class="vli td-text">
        <input type="text" value="Client  (former client)" id="f_categories-451-name" name="categories-451-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="30" data-index="580">

<td class="vli td-text">
        <input type="text" value="Client - PrivateViews" id="f_categories-580-name" name="categories-580-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="31" data-index="510">

<td class="vli td-text">
        <input type="text" value="Client at C4L" id="f_categories-510-name" name="categories-510-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="32" data-index="509">

<td class="vli td-text">
        <input type="text" value="Client at Coreix" id="f_categories-509-name" name="categories-509-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="33" data-index="511">

<td class="vli td-text">
        <input type="text" value="Clients at IP House" id="f_categories-511-name" name="categories-511-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="34" data-index="4">

<td class="vli td-text">
        <input type="text" value="Collector / Collection" id="f_categories-4-name" name="categories-4-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="35" data-index="485">

<td class="vli td-text">
        <input type="text" value="Critchley list" id="f_categories-485-name" name="categories-485-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="36" data-index="423">

<td class="vli td-text">
        <input type="text" value="Data /useful information (no contact details)" id="f_categories-423-name" name="categories-423-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="37" data-index="21">

<td class="vli td-text">
        <input type="text" value="Designer" id="f_categories-21-name" name="categories-21-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="38" data-index="422">

<td class="vli td-text">
        <input type="text" value="Friend / Family" id="f_categories-422-name" name="categories-422-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="39" data-index="466">

<td class="vli td-text">
        <input type="text" value="GalleryPro clients" id="f_categories-466-name" name="categories-466-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="40" data-index="579">

<td class="vli td-text">
        <input type="text" value="General Contact - dont mail - not client or supplier" id="f_categories-579-name" name="categories-579-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="41" data-index="589">

<td class="vli td-text">
        <input type="text" value="HK - Test Category" id="f_categories-589-name" name="categories-589-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="42" data-index="566">

<td class="vli td-text">
        <input type="text" value="Interior Designer" id="f_categories-566-name" name="categories-566-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="43" data-index="459">

<td class="vli td-text">
        <input type="text" value="Invoice by email / annually" id="f_categories-459-name" name="categories-459-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="44" data-index="590">

<td class="vli td-text">
        <input type="text" value="jgjhghjgg" id="f_categories-590-name" name="categories-590-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="45" data-index="464">

<td class="vli td-text">
        <input type="text" value="Job applicant - demo system" id="f_categories-464-name" name="categories-464-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="46" data-index="524">

<td class="vli td-text">
        <input type="text" value="Joe pre-existing contacts" id="f_categories-524-name" name="categories-524-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="47" data-index="588">

<td class="vli td-text">
        <input type="text" value="just robin" id="f_categories-588-name" name="categories-588-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="48" data-index="244">

<td class="vli td-text">
        <input type="text" value="Main contact for client or department" id="f_categories-244-name" name="categories-244-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="49" data-index="496">

<td class="vli td-text">
        <input type="text" value="Managed Artwork clients" id="f_categories-496-name" name="categories-496-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="50" data-index="584">

<td class="vli td-text">
        <input type="text" value="Michael test" id="f_categories-584-name" name="categories-584-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="51" data-index="15">

<td class="vli td-text">
        <input type="text" value="Multi-national" id="f_categories-15-name" name="categories-15-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="52" data-index="14">

<td class="vli td-text">
        <input type="text" value="Multiple locations" id="f_categories-14-name" name="categories-14-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="53" data-index="425">

<td class="vli td-text">
        <input type="text" value="Other" id="f_categories-425-name" name="categories-425-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="54" data-index="438">

<td class="vli td-text">
        <input type="text" value="Party list" id="f_categories-438-name" name="categories-438-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="55" data-index="454">

<td class="vli td-text">
        <input type="text" value="Peter &amp; David" id="f_categories-454-name" name="categories-454-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="56" data-index="445">

<td class="vli td-text">
        <input type="text" value="Peter only - for testing" id="f_categories-445-name" name="categories-445-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="57" data-index="434">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic for Artist client" id="f_categories-434-name" name="categories-434-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="58" data-index="431">

<td class="vli td-text">
        <input type="text" value="Potential Artlogic Online client" id="f_categories-431-name" name="categories-431-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="59" data-index="26">

<td class="vli td-text">
        <input type="text" value="Potential interactive client" id="f_categories-26-name" name="categories-26-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                 deleted" data-row="60" data-index="27">

<td class="vli td-text">
        <input type="text" value="Potential mailing list client" class="f f-text f-w-full deleted" disabled="">
</td>
                     
                        <td class="w25">&nbsp; <a class="vl-restore"><i class="fa fa-plus gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="61" data-index="576">

<td class="vli td-text">
        <input type="text" value="Potential website client (art)" id="f_categories-576-name" name="categories-576-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="62" data-index="575">

<td class="vli td-text">
        <input type="text" value="Potential website client (non-art)" id="f_categories-575-name" name="categories-575-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="63" data-index="16">

<td class="vli td-text">
        <input type="text" value="Private individual" id="f_categories-16-name" name="categories-16-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="64" data-index="523">

<td class="vli td-text">
        <input type="text" value="Private Views - Art Systems iPad client" id="f_categories-523-name" name="categories-523-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="65" data-index="522">

<td class="vli td-text">
        <input type="text" value="Private Views - Artbinder clients" id="f_categories-522-name" name="categories-522-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="66" data-index="521">

<td class="vli td-text">
        <input type="text" value="Private Views - Artlogic to contact first" id="f_categories-521-name" name="categories-521-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="67" data-index="537">

<td class="vli td-text">
        <input type="text" value="PrivateViews - Free Trial" id="f_categories-537-name" name="categories-537-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="68" data-index="538">

<td class="vli td-text">
        <input type="text" value="PrivateViews - non-sassy account holder" id="f_categories-538-name" name="categories-538-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="69" data-index="25">

<td class="vli td-text">
        <input type="text" value="Prospective database/small online solution client" id="f_categories-25-name" name="categories-25-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="70" data-index="24">

<td class="vli td-text">
        <input type="text" value="Prospective web client" id="f_categories-24-name" name="categories-24-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="71" data-index="426">

<td class="vli td-text">
        <input type="text" value="Quarterly invoice" id="f_categories-426-name" name="categories-426-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="72" data-index="492">

<td class="vli td-text">
        <input type="text" value="Reading Room clients" id="f_categories-492-name" name="categories-492-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="73" data-index="583">

<td class="vli td-text">
        <input type="text" value="Sales - Art fair visit from Joe" id="f_categories-583-name" name="categories-583-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="74" data-index="582">

<td class="vli td-text">
        <input type="text" value="Sales - Cold call from Joe" id="f_categories-582-name" name="categories-582-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="75" data-index="40">

<td class="vli td-text">
        <input type="text" value="Spammer - they have spammed us" id="f_categories-40-name" name="categories-40-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="76" data-index="424">

<td class="vli td-text">
        <input type="text" value="Supplier / Service / tradesman for Peter and David" id="f_categories-424-name" name="categories-424-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="77" data-index="421">

<td class="vli td-text">
        <input type="text" value="Supplier for Artlogic" id="f_categories-421-name" name="categories-421-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="78" data-index="489">

<td class="vli td-text">
        <input type="text" value="Test" id="f_categories-489-name" name="categories-489-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="79" data-index="428">

<td class="vli td-text">
        <input type="text" value="Web / IT consultant" id="f_categories-428-name" name="categories-428-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="80" data-index="10">

<td class="vli td-text">
        <input type="text" value="Website client - BESPOKE" id="f_categories-10-name" name="categories-10-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>
            <tr class="vlr
                
                " data-row="81" data-index="574">

<td class="vli td-text">
        <input type="text" value="Website client - TEMPLATE" id="f_categories-574-name" name="categories-574-name" class="f f-text f-w-full">
</td>
                                            <td class="w25">&nbsp; <a class="vl-del"><i class="fa fa-trash-o gray"></i></a></td>
                            </tr>

            <tr class="vlr">

<td class="vli td-text">
        <input type="text" value="" name="categories--name" class="f f-text f-w-full">
</td>
            </tr>
        
    </tbody></table>
</div>';


$('#list').get(0).innerHTML = html;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments