2D Array Query - неожиданные запятые в выводе, несмотря на использование join ();

Question

Я прилагаю все усилия, чтобы выучить jQuery, и я немного застрял. Я пытаюсь создать 2d массив данных формы в таблице, и это, кажется, работает, но я возвращаю запятые, когда пытаюсь получить значения, даже когда я использую join ().

Мне интересно, если я делаю что-то не так. Я использую событие кнопки, чтобы вызвать предупреждение, чтобы показать значения с помощью join ().

Вот это HTML:

<table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
 <tr data-key="1">
    <td> <input type="text" class="pull-right form-control" name="" value="D"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="E"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="F"></td>
  </tr>

   <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="H"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="I"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="J"></td>

    </tr>


       <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="K"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="L"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="M"></td>
  </tr>
  </tbody>

</table>

<button id="btn1" style="width:100px, height:100px">Click</button>

Вот jquery / javascript :

$("#btn1").click(function(){

  var tableData = $('tr').map(function() {
  return [$(this).find(':input').map(function() {
    return $(this).val()
  }).get()]
  }).get()

  alert(tableData.join(""));

console.log(tableData)  
}); 

Это мой вывод для вышеупомянутого: D, E, FH, I, JK, L, M

Answer 1

Исходя из вопроса о том, что ваша цель состоит в том, чтобы удалить все запятые в выходной строке, вам также необходимо также join() внутренний массив. Также обратите внимание, что вы можете сделать код более лаконичным, используя функции стрелок. Попробуйте это:

$("#btn1").click(function() {
  var tableData = $('tr').map((_, tr) => [
    $(tr).find(':input').map((_, inp) => inp.value).get().join('')
  ]).get();
  console.log(tableData.join(''));
});

#btn1 { width: 100px; height: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
    <tr data-key="1">
      <td><input type="text" class="pull-right form-control" name="" value="D"></td>
      <td><input type="text" class="pull-right form-control" name="" value="E"></td>
      <td><input type="text" class="pull-right form-control" name="" value="F"></td>
    </tr>
    <tr data-key="2">
      <td><input type="text" class="pull-right form-control" name="" value="H"></td>
      <td><input type="text" class="pull-right form-control" name="" value="I"></td>
      <td><input type="text" class="pull-right form-control" name="" value="J"></td>
    </tr>
    <tr data-key="2">
      <td><input type="text" class="pull-right form-control" name="" value="K"></td>
      <td><input type="text" class="pull-right form-control" name="" value="L"></td>
      <td><input type="text" class="pull-right form-control" name="" value="M"></td>
    </tr>
  </tbody>
</table>

<button id="btn1">Click</button>

Однако, если ваша цель - создать этот вывод, вам не нужны два цикла. Вы можете l oop напрямую через входы создать плоскую строку:

$("#btn1").click(function() {
  var tableData = $('input.form-control').map((_, inp) => inp.value).get().join('');
  console.log(tableData);
});

#btn1 { width: 100px; height: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
    <tr data-key="1">
      <td><input type="text" class="pull-right form-control" name="" value="D"></td>
      <td><input type="text" class="pull-right form-control" name="" value="E"></td>
      <td><input type="text" class="pull-right form-control" name="" value="F"></td>
    </tr>
    <tr data-key="2">
      <td><input type="text" class="pull-right form-control" name="" value="H"></td>
      <td><input type="text" class="pull-right form-control" name="" value="I"></td>
      <td><input type="text" class="pull-right form-control" name="" value="J"></td>
    </tr>
    <tr data-key="2">
      <td><input type="text" class="pull-right form-control" name="" value="K"></td>
      <td><input type="text" class="pull-right form-control" name="" value="L"></td>
      <td><input type="text" class="pull-right form-control" name="" value="M"></td>
    </tr>
  </tbody>
</table>

<button id="btn1">Click</button>