Question

到目前为止，我已经能够将表行与td中的文本合并，但是textarea中的文本还没有通过。我的桌子

Column1 | column2 | column3 | Column4
--------------------------------------
 Assay  |  Source | label  |   3%
-------------------------------------
 Assay  |  Source | label  |   10%
-------------------------------------

我想要完成的事情

Column1 | column2 | column3 | Column4
--------------------------------------  //Note that Column1 has
        |        |         |   3%       //no textarea, just td text
 Assay  - Source -   label -----------  //While all the rest have
        |        |         |   10%      //textareas in the tds
-------------------------------------   // from column 2 - 4

我有这个代码只适用于没有textareas的tds。如何合并具有相同数据的textareas的行？

function merge() {
  $('.result_table').each(function() {
    var Column_number_to_Merge = 1;

    // Previous_TD holds the first instance of same td. Initially first TD=null.
    var Previous_TD = null;
    var i = 1;
    $("tbody", this).find('tr').each(function() {
      // find the correct td of the correct column
      // we are considering the table column 1, You can apply on any table column
      var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');

      if (Previous_TD == null) {
        // for first row
        Previous_TD = Current_td;
        i = 1;
      } else if (Current_td.text() == Previous_TD.text()) {
        // the current td is identical to the previous row td
        // remove the current td
        Current_td.remove();
        // increment the rowspan attribute of the first row td instance
        Previous_TD.attr('rowspan', i + 1);
        i = i + 1;
      } else {
        // means new value found in current td. So initialize counter variable i
        Previous_TD = Current_td;
        i = 1;
      }
    });
  });
}

HTML

<table class="table table-condensed col-md-12 result_table">
  <thead style="border:solid black 1px;">
    <td class="side">TEST</td>
    <td class="tdbold">METHOD</td>
    <td class="tdbold">COMPENDIA</td>
    <td class="tdbold">SPECIFICATION</td>
    <td class="tdbold">DETERMINED</td>
    <td class="side">REMARKS</td>
  </thead>
  <tbody>
    <tr valign="middle" align="center">
      <td style="font-size:13px; " class="tbody_data side" rowspan="2">Assay</td>
      <td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
        <input type="hidden" value="6" name="tests[]">
        <textarea style="border: medium none; vertical-align: middle; height: 79px;" class="det_st form-control">HPLC</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 79px;" class="det_st form-control">Adopted In-House Method</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 79px;" class="det_st form-control">92.5 - 107.5%</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 82px;" class="det_st form-control">Day 1 105.3% (RSD=1.5%; n=6)</textarea>
      </td>
      <td class="tbody_data side">
        <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
          <option value="COMPLIES">COMPLIES</option>
          <option value="COMPLIES">COMPLIES</option>
          <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
        </select>
      </td>
    </tr>

    <tr valign="middle" align="center">

      <td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
        <input type="hidden" value="6" name="tests[]">
        <textarea style="border: medium none; vertical-align: middle; height: 79px;" class="det_st form-control">HPLC</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 79px;" class="det_st form-control">Adopted In-House Method</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 79px;" class="det_st form-control">92.5 - 107.5%</textarea>
      </td>
      <td style="padding: 0px;" class="tbody_data">
        <textarea style="border: medium none; height: 102px;" class="det_st form-control">Day 7 102.9% (RSD=0.27%; n=6)</textarea>
      </td>
      <td class="tbody_data side">
        <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
          <option value="COMPLIES">COMPLIES</option>
          <option value="COMPLIES">COMPLIES</option>
          <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我不完全确定你要做什么，但它看起来像这一行：

if (Current_td.text() == Previous_TD.text())

可以更改为：

 if (Current_td.text() == Previous_TD.text()
      || Current_td.find("textarea").val() == Previous_TD.find("textarea").val())

Answer 2

问题似乎就在这一行

  var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');

在第一行，var Column_number_to_Merge = 1;会将包含Assay的列设置为Previous_TD。

在第二行，Current_td指向textarea。所以内容永远不会匹配。

我建议在列上设置data属性并使用它们比较值。或者将您的数据分组到服务器上，然后按照您需要的方式将其写在dom上。

包含textareas的rowspan表td

2 个答案: