如何动态填充HTML页面上的列表

时间：2017-04-12 17:43:24

标签： javascript html

在提出这个问题之前，我探讨了如何动态地将元素添加到列表中的现有答案，并将其中的几个结合到我尝试满足我需求的解决方案中。但是，似乎从未填充该列表。我认为问题可能与访问列表以附加元素有关，但我不完全确定。

我的HTML：

<div class="row" id="row">
<div class="col-sm-4" id="faculty">
    <h3> Faculty Decks </h3>
    <ul id="faculty_list"> </ul>
</div>
<div class="col-sm-4">
    <h3> Instructions </h3>
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p>
<div>
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input>
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input>
    <br />
    <br />
    <button> Start Studying </button>
</div> 
</div>
<div class="col-sm-4" id="student">
    <h3> Student Decks </h3>
    <ul id="student_list"> </ul>
</div>

我正在调用HTML文件中的其他Javascript函数，并且我已经确认函数被调用，参数是我所期望的，并且循环运行适当的次数。

这是我的Javascript功能：

function populateLists(json) {
    for (var i = 0; i < json.length; i++){
        //Create a new list element
        var list_item = document.createElement('li');   
        list_item.setAttribute('name', json[i].name);

        //Create the checkbox to add to the list element
        var select_checkbox = document.createElement('input');
        select_checkbox.type = 'checkbox';
        select_checkbox.id = json[i].deck_ID;

        //Add the checkbox to the list element
        list_item.appendChild(select_checkbox);

        var list = document.getElementById('row').getElementById((json[i].faculty=='1')?'faculty':'student' + '_list');

        list.append(list_item);
    }
 }

4 个答案:

答案 0 :(得分：0)

你走了！

var json={'a': 'First', 'b': 'Second', 'c': 'Third'};
function makeUL(json) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < Object.keys(json).length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(Object.values(json)[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of json to #foo:
document.getElementById('foo').appendChild(makeUL(json));
<div id="foo"></div>

答案 1 :(得分：0)

看起来好像找不到合适的清单。我收到的错误是你无法链接getElementById调用，所以我使用了queryselector。为了便于阅读，我还列出了列表名称。

function populateLists(json) {
for (var i = 0; i < json.length; i++){
    //Create a new list element
    var list_item = document.createElement('li');   
    list_item.setAttribute('name', json[i].name);
    

    //Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);
    

    var list_name = (json[i].faculty=='1')?'faculty':'student' + '_list';
    var list = document.querySelector('#row #' + list_name);

    list.append(list_item);
}
}

var data = [{"name": "abcd", "deck_ID": "a123","faculty":'1'},{"name": "bcde", "deck_ID": "a123","faculty":'1'},{"name": "cdef", "deck_ID": "a123","faculty":'1'}];
populateLists(data);
<div class="row" id="row">
<div class="col-sm-4" id="faculty">
    <h3> Faculty Decks </h3>
    <ul id="faculty_list"> </ul>
</div>
<div class="col-sm-4">
    <h3> Instructions </h3>
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p>
<div>
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input>
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input>
    <br />
    <br />
    <button> Start Studying </button>
</div> 
</div>
<div class="col-sm-4" id="student">
    <h3> Student Decks </h3>
    <ul id="student_list"> </ul>
</div>

答案 2 :(得分：0)

我会这样做而没有Object.keys：

var dataObj ={'a': 'First', 'b': 'Second', 'c': 'Third'};
function createUL(json) {
    /* Create the list element: */
    var list = document.createElement('ul');

    for (var key in dataObj) {
        /* Create the list item: */
        var item = document.createElement('li');

        /* Set its contents: */
        item.appendChild(document.createTextNode(dataObj[key]));

        /* Add it to the list: */
        list.appendChild(item);
    }

    /* Return the constructed list: */
    return list;
}

/* Add the contents of dataObj to #bar: */
document.getElementById('bar').appendChild(createUL(dataObj));
<div id="bar"></div>

答案 3 :(得分：0)

这是一个有效的例子，虽然我猜你要在复选框中添加一些文字（用class ChildrenController < ApplicationController before_filter :authenticate_parent! before_action :set_child, only: [:show, :edit, :update, :destroy] # GET /children # GET /children.json def index @children = Child.all end # GET /children/1 # GET /children/1.json def show end # GET /children/new def new @child = Child.new end # GET /children/1/edit def edit end # POST /children # POST /children.json def create @child = Child.new(child_params) if @child.avatar.file.nil? img = LetterAvatar.generate(@child.name, 200) File.open(img) do |f| @child.avatar = f end end respond_to do |format| if @child.save format.html { redirect_to @child, notice: 'Child was successfully created.' } format.json { render :show, status: :created, location: @child } else format.html { render :new } format.json { render json: @child.errors, status: :unprocessable_entity } end end end # PATCH/PUT /children/1 # PATCH/PUT /children/1.json def update if @child.avatar.file.nil? img = LetterAvatar.generate(@child.name, 200) File.open(img) do |f| @child.avatar = f end end respond_to do |format| if @child.update(child_params) format.html { redirect_to @child, notice: 'Child was successfully updated.' } format.json { render :show, status: :ok, location: @child } else format.html { render :edit } format.json { render json: @child.errors, status: :unprocessable_entity } end end end # DELETE /children/1 # DELETE /children/1.json def destroy @child.destroy respond_to do |format| format.html { redirect_to children_url, notice: 'Child was successfully destroyed.' } format.json { head :no_content } end end private # Use callbacks to share common setup or constraints between actions. def set_child @child = Child.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def child_params params.fetch(:child, {}).permit(:name, :balance, :parent_id, :avatar) # params.fetch(:user, {}).permit(:first_name, :last_name, :email, :phone, end end 标签轻松完成）。我编写了一个JSON对象作为例子;要使用此代码，只需删除该对象并将您的JSON对象传递到<label>。

我做了一些改变：

  • 删除了已链接的populateLists()来电
  • 将.getElementById更改为.append()
  • 将.appendChild()属性添加到onclick按钮
  • 添加了遗失的Start Studying代码

</div>
var json = [
  {name: "Person1",
  deck_ID: "Deck1",
  faculty: "1"
  },
  {name: "Person2",
  deck_ID: "Deck2",
  faculty: "1"
  },
  {name: "Person3",
  deck_ID: "Deck3",
  faculty: "1"
  }
];

function populateLists() {
    for (var i = 0; i < json.length; i++){
        //Create a new list element
        var list_item = document.createElement('li');   
        list_item.setAttribute('name', json[i].name);

        //Create the checkbox to add to the list element
        var select_checkbox = document.createElement('input');
        select_checkbox.type = 'checkbox';
        select_checkbox.id = json[i].deck_ID;

        //Add the checkbox to the list element
        list_item.appendChild(select_checkbox);

        var list = document.getElementById((json[i].faculty=='1')?'faculty':'student' + '_list');

        list.appendChild(list_item);
    }
 }

相关问题
最新问题