Объединение в JQuery из 2 столбцов таблицы

Question

Итак, я собрал нижеприведенное, и я не получил ожидаемого результата, который искал

    /* Build SQL string */ 
$(".ConvertSQL").click(function () {

    $(".TableQuery").children("tbody").children("tr").each(function (i) {

        $("#SQLstring").val("")

        var $this = $(this);
        var my_td = $this.children("td");
        var first_col = my_td.eq(0);
        var second_col = my_td.eq(1);
        var query = "SELECT "
        var text = $("#SQLstring").val()

        query = query + "[" + first_col.html() + "].[" + second_col.html() + "],";
        first_col = ""
        second_col = ""


        $("#SQLstring").val(text + query) 

    }); 

    /* Remove some text from the start of the string thats not needed */
    $('#SQLstring').contains('SELECT [undefined].[undefined],').remove();

});

Нет ошибок, которые я получаю как таковые.

Код перебирает первые 2 столбца в моей таблице и создает запрос SQL

Текущий результат:

SELECT [Таблица тестов]. [Поле тестов],

В основном следует объединить строку вместе, чтобы показать что-то вроде:

SELECT [Тестовая таблица]. [Тестовое поле], [Тестовая таблица]. [Тестовое поле],

Answer 1

Проблема в том, что вы определяете query в каждой итерации l oop. Вам нужно определить его снаружи, а затем добавить к нему по мере продвижения l oop.

Аналогично, вам нужно обновить поле '#SQLstring только после завершения l oop. Значение #SQLstring для пустого может быть удалено вместе с кодом для извлечения и объединения его значения (которое является избыточным, поскольку первое, что делает l oop, - это пустое значение, поэтому оно всегда пустое). Попробуйте это:

$(".ConvertSQL").click(function() {
  var query = "SELECT ";

  $(".TableQuery").children("tbody").children("tr").each(function(i) {
    var $td = $(this).children("td");
    query += "[" + $td.eq(0).html() + "].[" + $td.eq(1).html() + "],";
  });

  $("#SQLstring").val(query.slice(0, -1)); // slice is used to remove trailing comma
});

input { 
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="TableQuery">
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>
<button class="ConvertSQL">Convert SQL</button>
<input type="text" id="SQLstring" />

Сказано, что лучшим подходом было бы использовать map() для построения массива из значений, которые затем можно join() собрать вместе , вот так:

$(".ConvertSQL").click(function() {
  var query = $('.TableQuery > tbody > tr').map(function() {
    var $td = $(this).children('td');
    return `[${$td.eq(0).html()}].[${$td.eq(1).html()}]`;
  }).get().join(', ');
  
  $("#SQLstring").val(`SELECT ${query}`);
});

input { 
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="TableQuery">
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>
<button class="ConvertSQL">Convert SQL</button>
<input type="text" id="SQLstring" />

Answer 2

Ваш код будет выглядеть как

$(".ConvertSQL").click(function () {
    var sqlQuery = [];
    $(".TableQuery").children("tbody").children("tr").each(function (i) {

        $("#SQLstring").val("");
        var $this = $(this);
        var my_td = $this.children("td");
        var first_col = my_td.eq(0);
        var second_col = my_td.eq(1);

        var text = $("#SQLstring").val()

        var query = `SELECT [${first_col.html()}].[${second_col.html()}]`;
        if(first_col.html() != undefined && second_col.html() != undefined ){
            sqlQuery.push(query);
        }
    }); 

  $("#SQLstring").val(sqlQuery.join(',')); 
});