Question

我有一个id为“myTable”的html表和一个数组“myArray”。我想用myArray的值在表格中下拉。我怎样才能做到这一点？

我需要迭代数组而不是下拉，但是如何？是否有一种jQuery方式可以轻松实现这一点？

 <script>
             var myArray = ["one", "two", "three"];

             var table = document.getElementById("myTable");

             var row = table.insertRow(0);

             var cell1 = row.insertCell(0);
             var cell2 = row.insertCell(1);
             var cell3 = row.insertCell(2);


             cell1.innerHTML = "something";
             cell2.innerHTML = "something else";
             cell3.innerHTML = myArray; //This should be a dropdown
    </script>

Answer 1

由于jQuery被标记在那里，所以你可以这样做： -

工作片段： -

$(document).ready(function(){
  var myArray = ["one", "two", "three"];
  var option = '';
  $.each(myArray,function(key,value){
    option += "<option value"+key+">"+value+"</option>";
  });
  $('#select').html(option);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select"></select>

Answer 2

如果你不介意使用它，这是jQuery的解决方案。

             var myArray = ["one", "two", "three"];

             var $table = $("#myTable");
             var $tr = $('<tr>');
             $tr.html('<td>something</td><td>something else</td><td class="options"></td>');
             
             var $select = $('<select>');
             for (var i=0; i<myArray.length; i++) {
              $('<option>').html(myArray[i]).appendTo($select);
             }
             $select.appendTo($tr.find('.options'));
             $tr.appendTo($table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1" cellspacing="0" cellpadding="0"></table>

Answer 3

jQuery在这里不会为您节省太多精力。这将是一个纯粹的JavaScript解决方案，用于比较：

＆＃13;

var myArray = ["one", "two", "three"];
var dropdown = "<select>\n";
myArray.forEach(addOption);
dropdown += "</select>";
document.getElementById("dropdown").innerHTML = dropdown;

function addOption(item, index) {
  dropdown += "\t<option value='" + item + "'>" + item + "</option>\n";
}

＆＃13;

<div id='dropdown'></div>

＆＃13;

如何使用jquery在html表中创建Dropdown

3 个答案: