Question

当我尝试在jQuery中转换时，我有一些用javascript编写的代码我收到了错误。

    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>";
          }
        }
      }
    }

我试过

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

我不知道如何处理innertext和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 1

检查以下代码段

＆＃13;

$(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);
                  }
                }
              }
        }


    });

＆＃13;

<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>

＆＃13;

希望这有帮助

Answer 2

以下是代码的“jqueryized”版本

var holder = $('#filedetails'),
  rows = holder.find('tr');
var setSuccess = function(filename) {
  rows.each(function() {
    var cells = $(this).find('td');
    if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
      cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'></a>");
    }
  });
};
setSuccess("Sample_Image");

替代只使用行：

var  rows = $('#filedetails').find('tr');
var setSuccess = function(filename,useme) {
  useme.each(function() {
    var cells = $(this).find('td');
    if (cells.eq(0).text() == filename && cells.eq(3).text() != "error!") {
      cells.eq(3).html("<a href='#' class='file-delete ss-delete no-click'>freebeer</a>");
    }
  });
};
setSuccess("Sample_Image", rows);

要不使用位置表元素，请在TD单元格中使用类和过滤器，如下所示：假设每行使用一个类。

var rows = $('#filedetails').find('tr');
var setSuccess = function(filename, useme) {
  useme.each(function() {
    var cells = $(this).find('td');
    if (cells.filter('.file-name').text() == filename
          && cells.filter('.file-loading').text() != "error!") {
      cells.filter('.file-loading')
        .html("<a href='#' class='file-delete ss-delete no-click'>noclick</a>");
    }
  });
};
setSuccess("Sample_Image", rows);

Fiddl https://jsfiddle.net/MarkSchultheiss/0fx2jms7/2/

将javascript转换为jquery（getelementbyid，tagname，innertext，innerhtml）

2 个答案: