Kunal Vijan Kunal Vijan - 1 month ago 10
Javascript Question

Conversion of javascript to jquery (getelementbyid, tagname, innertext, innerhtml)

I have some code written in javascript n when I am trying to convert in jQuery I am getting error.

var holder = document.getElementById('filedetails')
, rows = holder.getElementsByTagName('tr')
setSuccess = function(filename) {
if (holder != null) {
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (cells[0].innerText == filename && cells[3].innerText != "error!") {
cells[3].innerHTML = "<a href='#' class='file-delete ss-delete no-click'></a>";
}
}
}
}


I tried

var holder = $('#filedetails"),
rows = $('#filedetails tr")


I am not sure what to do with innertext and innerhtml.

<div data-behavior="delete-process" id="holder">
<table>
<thead>
<tr>
<th class="medium-5">Name</th>
<th class="medium-3">Size</th>
<th class="medium-3">Type</th>
<th class="medium-1"></th>
</tr>
</thead>
<tbody id="filedetails">
<tr data-filesize="1.4" data-filename="Sample Image.jpg">
<td><strong>Sample_Image</strong></td>
<td class="nodesize">1.4 MB</td>
<td>JPG</td>
<td class="file-loading"><a href="#" class="file-delete ss-delete"></a></td></tr>
</tbody>
</table>
<div class="margin bottom large text-center drag-desc">drag and drop files here.</div>
</div>

Answer

Check the following code snippet

$(document).ready(function(){
          var holder = $("#filedetails")
            , rows = holder.find('tr');
        var rowsLength=rows.Length;

        var setSuccess = function(filename) {
              if (holder != null) {
                var j=rows.length;
           for (var i=0; i < j; ++i) {
                 var cells = $(rows[i]).find('td');
             var filename=$('.filename');
             var file=$('.file');

                  if (filename.text() == filename && file.text() != "error!") 
                  {

                    var aElement=$("<a/>");
                    aElement.href="#";
                    aElement.class="file-delete ss-delete no-click";

                    file.html(aElement);
                  }
                }
              }
        }


    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-behavior="delete-process" id="holder">
                <table>
                  <thead>
                    <tr>
                      <th class="medium-5">Name</th>
                      <th class="medium-3">Size</th>
                      <th class="medium-3">Type</th>
                      <th class="medium-1"></th>
                    </tr>
                  </thead>
                  <tbody id="filedetails">
<tr data-filesize="1.4" data-filename="Sample Image.jpg">
<td class="filename"><strong>Sample_Image</strong></td>
<td class="nodesize">1.4 MB</td>
<td>JPG</td>
<td class="file-loading file"><a href="#" class="file-delete ss-delete"></a></td></tr>
</tbody>
</table>
<div class="margin bottom large text-center drag-desc">drag and drop files here.</div>
              </div>

Hope this helps

Comments