如何从第n次出现开始将TD字符串拆分为新行

时间：2017-09-03 08:31:53

标签： javascript jquery

下面的代码将每行的文本拆分为某个分隔符的新创建的行。

这样可以正常工作，但是我如何仅在分隔符的第n次（即第二次）出现时才开始分裂？

期望的结果应该是这样的： 从第二个＆＃39; /＆＃39;开始分裂。定界符：

此：
的 PMC37516JG / DMM / 1946P / C.Q4.DUMMY

变为：
的 PMC37516JG / DMM
1946P
C.Q4.DUMMY

每个字符串中的分隔符数量是可变的。 我搜索了互联网，但在那里找不到答案 欢迎大家帮忙。

＆＃13;
＆＃13; 
$('#tbl tr').each(function(){
  var $this = $(this);
  var arr = $this.text().split('/');
  var len = arr.length;
  var i;
  var $previous = $this;
  for (i = 0; i < arr.length; ++i) {
    var $tr = $this.clone();
    $tr.find("td").text(arr[i]); 
    $previous.after( $tr );
    $previous = $tr;
  }
  $this.remove();
});
＆＃13; 
th {
  height: 15px;
  min-width: 30px;
  border: 1px solid black;
  font-size: 12px;
  font-family: Courier, monospace;
  padding: 2px 5px 2px 5px;
}
td {
  height: 15px;
  min-width: 30px;
  border: 1px solid black;
  font-size: 12px;
  font-family: Courier, monospace;
  padding: 2px 5px 2px 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
  <thead>
    <tr class="tbl-header">
      <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>UWS</td>
    </tr>
    <tr>
      <td>DA8101A/12.DOH</td>
    </tr>
    <tr>
      <td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC18713DA/DMM/2118P/C.Q4</td>
    </tr>
    <tr>
      <td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
    </tr>
    <tr>
      <td>-PMC18964DA/DMM/1270P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC13312DA/DMM/1500P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC15970DA/DMM/2780P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC19458DA/DMM/2644P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
    </tr>
    <tr>
      <td>-PMC88130FF/DMM/2450P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC13913DA/DMM/2930P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC19689DA/DMM/3298P/C.Q5</td>
    </tr>
    <tr>
      <td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC11453DA/DMM/3212P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC90443FF/DMM/520P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC16529DA/DMM/624P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
    </tr>
    <tr>
      <td>-PMC38632JG/DMM/3094P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC19767DA/DMM/3778P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC12044DA/DMM/2672P/C.Q4</td>
    </tr>
    <tr>
      <td>-PMC37949JG/DMM/1672P/C.Q6</td>
    </tr>
    <tr>
      <td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
    </tr>
    <tr>
      <td>-PMC10478DA/DMM/1548P/C.PWG</td>
    </tr>
    <tr>
      <td>-PMC88389FF/DMM/1164P/C.PLD</td>
    </tr>
  </tbody>
</table>

Expand snippet shareeditflag edited yesterday answered yesterday Sven The Surfer 894518 I guess I was'n clear enough. I need the splitted text to be put on a new line, underneach each other (row) rather than on a new column. – Dummy yesterday OK I see
that you accepted an answer already, but I've updated the code! Mine also separates each into their sub-row so you could space them out/arrange them better – Sven The Surfer yesterday add a comment up vote 0 down vote accept Something like this? Grab
all of the td elements. Split them on the '/'. Clear the row that they are in, then loop through them, creating td elements for each one. Then, add them back to the row. [].forEach.call(document.querySelectorAll('td'), td => { let content = td.innerHTML;
let row = td.parentElement; row.innerHTML = ''; content.split('/').forEach( c => { let td = document.createElement('td'); td.innerHTML = c; row.appendChild(td); }); });

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<table id="tbl">
  <thead>
    <tr class="tbl-header">
      <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>UWS</td>
    </tr>
    <tr>
      <td>DA8101A/12.DOH</td>
    </tr>
    <tr>
      <td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
    </tr>
    <tr>
      <td>-PMC18713DA/DMM/2118P/C.Q4</td>
    </tr>
    <tr>
      <td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
    </tr>
    <tr>
      <td>-PMC18964DA/DMM/1270P/C.Q5</td>
    </tr>
    <tr>
      <td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td>
    </tr>
    <tr>
      <td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
    </tr>
    <tr>


      <tr>
        <td>-PMC15970DA/DMM/2780P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC19458DA/DMM/2644P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
      </tr>
      <tr>
        <td>-PMC88130FF/DMM/2450P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC13913DA/DMM/2930P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC19689DA/DMM/3298P/C.Q5</td>
      </tr>
      <tr>
        <td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC11453DA/DMM/3212P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC90443FF/DMM/520P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC16529DA/DMM/624P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
      </tr>
      <tr>
        <td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
      </tr>
      <tr>
        <td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
      </tr>
      <tr>
        <td>-PMC38632JG/DMM/3094P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC19767DA/DMM/3778P/C.Q5</td>
      </tr>
      <tr>
        <td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC12044DA/DMM/2672P/C.Q4</td>
      </tr>
      <tr>
        <td>-PMC37949JG/DMM/1672P/C.Q6</td>
      </tr>
      <tr>
        <td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
      </tr>
      <tr>
        <td>-PMC10478DA/DMM/1548P/C.PWG</td>
      </tr>
      <tr>
        <td>-PMC88389FF/DMM/1164P/C.PLD</td>
      </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

你可以这样做：

$('#tbl tr').each(function(){
  var $this = $(this);
  var arr = $this.text().split('/');
  var firstTwo = arr.splice(0,2);
  var firstEl = firstTwo.join('/').trim();
  arr.unshift(firstEl);
  var len = arr.length;
  var i;
  var $previous = $this;
  for (i = 0; i < arr.length; ++i) {
    var $tr = $this.clone();
    $tr.find("td").text(arr[i]); 
    $previous.after( $tr );
    $previous = $tr;
  }
  $this.remove();
});

仅拆分第二次出现而不是第二次出现：

$('#tbl tr').each(function(){
  var $this = $(this);
  var arr = $this.text().trim().split('/');
  var firstTwo = arr.splice(0,2);
  var firstEl = firstTwo.join('/').trim();
  var rest = arr.join('/').trim();
  var newArr = [];

  if(rest !== ''){
    newArr.push(firstEl, rest);
  } else{
    newArr.push(firstEl);
  }
  var len = newArr.length;
  var i;
  var $previous = $this;
  for (i = 0; i < newArr.length; ++i) {
    var $tr = $this.clone();
    $tr.find("td").text(newArr[i]); 
    $previous.after( $tr );
    $previous = $tr;
  }
  $this.remove();
});
相关问题
最新问题