jQuery Map分别检索逗号分隔的值

如何解决jQuery Map分别检索逗号分隔的值

我正在使用多个文本框将数据插入数据库表中。因此，很少进行研究，并使用了在线资源来使其工作。但我想这只是一件基本的事情。问题在于jQuery映射。让我在这里分享代码：

//Add row to the table
$('#btnAddRow').on('click',function() {
    var $clone = $('#tblQuesAns tbody tr:last').clone();
    $clone.find('input').val('')
    $('#tblQuesAns tbody').append($clone);
   
});

//Add more rows for option
$('body').on('click','.addOptions',function() { 
   $(this).parent().append('<div><input  class="txtOptions" type="text" /></div>');
});

//Get text box values
$('#btnGetValues').on('click',function() {
const allData = $('#tblQuesAns tbody tr').map(function() {
  const $row = $(this),question = $row.find('.txtQuestion').val(),options = $row.find('.txtOptions').map(function() {
      return this.value;
    }).get().join(" ");

  //return {  question,options };
  alert(question + ' ' + options.replace(/\s+/g,"_"));
}).get();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btnAddRow" type="button">
    Add Row
</button>

<button id="btnGetValues" type="button">
   Get Values
</button>
<table id="tblQuesAns" border="1">
    <thead>
        <tr>
            <th>Question</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="txtQuestion" value="Capital of Englnad" />
            </td>
            <td>
                <input class="txtOptions" value="London" />
                <span class="addOptions">(+)</span>
            </td>
        </tr>
        <tr>
            <td>
                <input class="txtQuestion" value="Current Pandemic" />
            </td>
            <td>
                <input class="txtOptions" value="Corona" />
                <span class="addOptions">(+)</span>
            </td>
        </tr>
    </tbody>
</table>

默认情况下，jQuery映射使用逗号，而我尝试使用 replace 方法删除这些逗号，如下所示：

options.join(' ').replace(/\s+/g,"_")

现在我可能有一些可能包含逗号的选项。例如：

Question     Options
Question 1   New York
             Jakarta
             London,Paris
             Munich

问题是，文本框中具有空格的值也将替换为下划线符号 replace（/ \ s + / g，“ _”）。所以我得到以下输出：

New_York_Jakarta_London,_Paris_Munich

但是我的预期输出是这样：

New York_Jakarta_London,Paris_Munich

我尝试了另一种可行的方法，但是在这种情况下，所有文本框值都被串联了：

var options = $("input[name*='txtOptions']");
var str = "";

$.each(options,function(i,item) {
  str += $(item).val();
});

上述问题是，当我有不同的问题，例如问题1，问题2时，它将所有选项合并到这两个选项中。尽管我想为这两个问题提供具体的选择。

解决方法

像这样吗？

//Add row to the table
$('#btnAddRow').on('click',function() {
  var $clone = $('#tblQuesAns tbody tr:last').clone();
  $clone.find('input').val('')
  $('#tblQuesAns tbody').append($clone);

});

//Add more rows for option
$('body').on('click','.addOptions',function() {
  $(this).parent().append('<div><input  class="txtOptions" type="text" /></div>');
});

//Get text box values
$('#btnGetValues').on('click',function() {
  const allData = $('#tblQuesAns tbody tr').map(function() {
    const $row = $(this),question = $row.find('.txtQuestion').val(),options = $row.find('.txtOptions').map(function() {
        return this.value;
      }).get().join("_");
     return {question,options}
  }).get()
  const x = allData.map(item => `${item.question}_${item.options}`).join(" ")
  console.log(x)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btnAddRow" type="button">
    Add Row
</button>

<button id="btnGetValues" type="button">
   Get Values
</button>
<table id="tblQuesAns" border="1">
  <thead>
    <tr>
      <th>Question</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="txtQuestion" value="Capital of England" />
      </td>
      <td>
        <input class="txtOptions" value="London" />
        <span class="addOptions">(+)</span>
      </td>
    </tr>
    <tr>
      <td>
        <input class="txtQuestion" value="Current Pandemic" />
      </td>
      <td>
        <input class="txtOptions" value="Corona" />
        <span class="addOptions">(+)</span>
      </td>
    </tr>
  </tbody>
</table>