Javascript 使用选择框在html表中添加行

我想制作一个html表格，表格下面有一个选择框。如果从“选择”框中选择一个选项，则该选项将添加到表中，并且没有重复的条目。此外，选择框需要正确格式化。 我所寻找的是能够以正确的表格格式将数据提取到选项列中，如图所示。单词的长度不应改变通过添加空格无法实现的格式

@Tarekis用jsFiddle发布了一个答案。虽然它解决了我的大部分问题，但格式化部分仍然是一个问题。

好的，事情是这样的

当你改变你的选择时，你必须经历一些事情

首先，获取选项的数据并将其放入数组中

// Select the text of the chosen option
  var text = $(this).children(":selected").html();

// Create a regex to split the string  
  var regex = new RegExp(" *");

// Make an array out of the string
// The cleanArray() function is in the JSFiddle
  var array = cleanArray(text.split(regex));

现在您有了一个要添加的值数组

下一步是创建要添加到tbody的HTML

并添加HTML

  if(alreadyInTable == false){
    $("tbody #select").before(newRowHTML);
  }

重要提示：如果不阅读并应用这些依赖项，代码将无法工作

要使用此选项，您的选项中不能有任何空格或新行。这意味着它必须看起来像：

<option>thecompletetextwithoutanywhitespacesbetweenthedata</option>

此外，还必须将id=select添加到包含select的tr中，因为它位于显示数据的位置之后，因此可以使用$tbody select.beforenewRowHTML，如前所示

您必须选择+添加新行，正如您在FIDLE的HTML中所看到的那样，因为新行仅在更改select时添加，因此您不能只单击您已经选择的行，因为它不会更改您选择的行

---

这是一个完整的例子

您将如何按所示方式设置选择框选项的格式？使用.parent或生成一个函数，并使用此函数检查重复答案。你不应该对这个答案投反对票@ShashankSurwaseM不是投反对票的人@TheBlackbenzkid这不是一个有用的答案。实际上，您还没有向OP解释他如何将行附加到表中，只是解释了如何将事件挂接到select。请设置一个小提琴，以便更轻松地检查代码？这可能没有问题，但我需要查看行列表的格式以及选择框中的内容。我更感兴趣的是设置选择框的格式。您不能这样做，请参阅。所以，请提供我要求的其他信息，否则这个问题无法回答，将被标记。这里是小提琴-选择框中的数据实际上来自数据库。好的，选项中的数据由不同数量的空格分隔，这使得它们很难实际分割和使用，但并非不可能。另外，出于比较的原因，当您添加一个新项目并且不希望它是一个副本时，是否有一个唯一的密钥可以依赖？例如，第号高级船员？吨。。。bt仍然存在选项格式问题。。。选项文本将根据其前面文本的长度移动。。就像我在c之前说的，我感谢你，花了一点时间。这个问题必须在服务器端解决。您需要计算数据之间需要多少空间，或者您可以完全忽略select，然后编写自定义代码，这将花费更多的时间。哦，你也会考虑投票吗？我正在努力争取更高的特权。尽管我很想投赞成票。。我不能。。这个问题夺走了我所有的名誉啊，是的，我明白了，不管怎样：试着在服务器端计算您的空间，因为这可能比使用定制的HTML CSS JS堆栈方法来更好地显示它更容易，或者您也可以在某处找到一个定制的选择库，然后四处摆弄。

var alreadyInTable = false;
    $.each($("tbody tr > td:first-child"),function(){
      if(array[0] == $(this).html()){
        // If this ID is alreay in the table set the bool to true
        alreadyInTable = true;
      }
});

  if(alreadyInTable == false){
    $("tbody #select").before(newRowHTML);
  }

<option>thecompletetextwithoutanywhitespacesbetweenthedata</option>