Проблема при замене списка UL строкой в ​​ячейке таблицы

Question

Можете ли вы взглянуть на эту демонстрацию и сообщить, как я могу заменить <td>, содержащий список, простой строкой, такой как "Coffee & Tea & Milk"

var outt;
$("table td").each(function() {
  if ($(this).find("ul").length > 0) {
    var text = $(this).find("li").text();
    outt += text + "&";
  }
$(this).empty();
$(this).text(outt);
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    </td>
    <td>Austria</td>
  </tr>
</table>

Answer 1

В своем ответе я прошёл через UL, а не через tds, так что я могу легко сгруппировать элементы списка. Затем я прохожу через элементы списка oop и добавляю их в массив, затем просто присоединяю их, заменяя родительский.

$("table td ul").each(function() {
   var outt = [];
   $(this).find("li").each(function(){
    var text = $(this).text();
    outt.push(text);
   });
    $(this).parent().text(outt.join(" & " ));
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    </td>
    <td>Austria</td>
  </tr>
</table>