Question

发表了一个类似的问题，但可能这种情况会更有意义。得到一张表，其中许多第一个td的tr在不同的tr中具有重复的第一个td。我用这些来识别。我想从第2个tr中提取一个值并将其插入到第一个tr中已经附加的（！）td中。这是一个快速的HTML代码示例

<div class="tableclass">
  <table>
    <tbody>
      <tr>
       <td>id1</td>
       <td>something else</td>
       <td>1</td>
      </tr>
      <tr>
       <td>id2</td>
       <td>something else</td>
       <td>2</td>
      </tr>
      <tr>
       <td>id2</td>
       <td>something else</td>
       <td>3</td>
      </tr>
      <tr>
       <td>id3</td>
       <td>something else</td>
       <td>4</td>
      </tr>
      <tr>
       <td>id1</td>
       <td>something else</td>
       <td>5</td>
      </tr>
    <tbody>
  </table>
<div>

这是我的jquery代码

$(".tableclass table tbody tr").each(function(){
  $(this).append('<td class="fbctr"></td>');
   var trclass = $(this).find("td:first-child").html();
   $(this).addClass(trclass);
   // this is where I'm having a problem
   var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)");
   $(this).find(".fbctr").html(fbctr);
});

Answer 1

好的，您的问题是jquery .filter()适用于一组给定的DOM元素。因此，您必须先选择<tr>元素，然后使用.filter()。在您的问题中，您将在<table>

上应用它

因此，您的JavaScript代码将如下所示：

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html();
    if(typeof fbctr !== "undefined"){
        console.log(fbctr);
        $(this).find(".fbctr").html(fbctr);
    } 
});

更新（更正代码）：

如果您要将第一个出现的元素的值复制到第二个出现的元素中，请使用以下代码：

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var elements = $(this).parent().find('tr').filter('.'+trclass);
    if(elements.length > 1){
      var fbctr = elements.eq(0).find("td:nth-child(3)").html();
      if(typeof fbctr !== "undefined")
        $(this).find(".fbctr").html(fbctr);
    }
});

如果您想将第二个出现的元素的值复制到第一个出现的元素中，请使用以下代码：

$(".tableclass table tbody tr").each(function(){
    var trclass = $(this).find("td:first-child").html();
    $(this).addClass(trclass);
    var elements = $(this).parent().find('tr').filter('.'+trclass);
    var fbctr = elements.eq(1).find("td:nth-child(3)").html();
    if(typeof fbctr !== "undefined")
        $('.'+trclass).not(this).find(".fbctr").html(fbctr);
});

Answer 2

您可以先删除重复的行，然后删除所有重复的行，但不要先删除，然后在第一行中追加最后一个重复行的第3个td元素。

在下面的解决方案中，我也删除了重复的行，您可以根据您的要求保留/删除它。

这是工作解决方案，我已经添加了一些额外的节点来测试解决方案。

var rows = $(".tableclass table tbody tr")
rows.each(function() {
  var trclass = $(this).find("td:first-child").html();
  $(this).addClass(trclass);
  var dupeRows = rows.filter("." + trclass);
  rows.filter("." + trclass).not(":first").remove();
  if (dupeRows.length > 1) {
    rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableclass">
  <table>
    <tbody>
      <tr>
        <td>id1</td>
        <td>something else</td>
        <td>1</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>2</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>3</td>
      </tr>
      <tr>
        <td>id3</td>
        <td>something else</td>
        <td>4</td>
      </tr>
      <tr>
        <td>id1</td>
        <td>something else</td>
        <td>5</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>5</td>
      </tr>
      <tr>
        <td>id2</td>
        <td>something else</td>
        <td>8</td>
      </tr>
      <tbody>
  </table>
  <div>
    ;

从具有相同变量类的元素中获取值

2 个答案: