Question

var table_data = [ 
                 { first_name : 'Rose', last_name : 'Tyler', home : 'Earth' },
               { first_name : 'Zoe', last_name : 'Heriot',home : 'Space 
                  Station W3'},
               { first_name : 'Jo', last_name : 'Grant', home : 'Earth'},
               { first_name : 'Leela', last_name : null, home : 
               'Unspecified'},
               { first_name : 'Romana', last_name  : null, home : 
                'Gallifrey'},
               { first_name : 'Clara', last_name  : 'Oswald', home : 'Earth'},
               { first_name : 'Adric',last_name  : null, home : 'Alzarius'},
               { first_name : 'Susan', last_name  : 'Foreman', home : 
              'Gallifrey'}
            ];

for (prop in table_data ){
    document.write(prop , ':' , table_data[prop]);
}

我希望将这些数据放入表中。我如何将其插入HTML表格中。

Answer 1

不要使用document.write()，这是将数据放入页面的一种非常古老的方式，并且今天的用例非常有限。相反，遵循现代DOM标准并在内存中创建元素，配置它们，然后将它们附加到文档中。

请参阅以下代码中的评论：

var table_data = [ 
   { first_name : 'Rose', last_name : 'Tyler', home : 'Earth' },
   { first_name : 'Zoe', last_name : 'Heriot',home : 'Space Station W3'},
   { first_name : 'Jo', last_name : 'Grant', home : 'Earth'},
   { first_name : 'Leela', last_name : null, home : 'Unspecified'},
   { first_name : 'Romana', last_name  : null, home : 'Gallifrey'},
   { first_name : 'Clara', last_name  : 'Oswald', home : 'Earth'},
   { first_name : 'Adric',last_name  : null, home : 'Alzarius'},
   { first_name : 'Susan', last_name  : 'Foreman', home : 'Gallifrey'}
];

// First, prepare the table
var tbl = document.createElement("table");

// Loop through the main array
table_data.forEach(function(o){
  
  // For each object in the array, we need a new row
  var r = document.createElement("tr");
  
  // Now, loop over each object's properties
  for (var prop in o){
    // Each property will need to go into a cell
    var c = document.createElement("td");
    c.textContent = o[prop];  // Populate cell
    r.appendChild(c);         // Place cell in row
  }
  
  // Place row in table
  tbl.appendChild(r);
  
});

// Place table in document
document.body.appendChild(tbl);

table { 
  border:1px solid grey;
  width:50%;
}

tr:nth-child(odd) {
  background-color:aliceblue;
}

Answer 2

# Base image:
FROM ruby:2.4

# Install dependencies
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

# Set an environment variable where the Rails app is installed to inside of Docker image:
ENV RAILS_ROOT /var/www/app
RUN mkdir -p $RAILS_ROOT

ENV RAILS_ENV production
ENV RACK_ENV production

# Set working directory, where the commands will be ran:
WORKDIR $RAILS_ROOT

# Gems:
COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock
RUN gem install bundler
RUN bundle install

COPY config/puma.rb config/puma.rb

# Copy the main application.
COPY . .

RUN bundle exec rake RAILS_ENV=production assets:precompile

VOLUME ["$RAILS_ROOT/public"]

EXPOSE 3000

# The default command that gets ran will be to start the Puma server.
CMD bundle exec puma -C config/puma.rb

我试图插入一个＆＃39;数组＆＃39; ＆＃39;对象＆＃39;进入一个HTML表

2 个答案: