Question

我有一个包含以下内容的javascript文件，并希望使用它的内容生成动态html表

(function($) {
  My.Shortcuts = { 
    a:   'Name',
    b:    'Elvis',
    c:    'Fun'
  };

  My.Plugins.extend({
    Name: {
      url: 'http://www.name.com'
      example: 'some example text here'
    },
    Elvis: {
      url: 'http://www.elvis.com'
    },
    Fun: {
      url: 'http://anothersite.com'
    }
  });
})(jQuery);

结果应该是html表或div列表，如：

a | Name | http://www.name.com (some example text here)
b | Elvis | http://www.elvis.com
c | Fun | http://anothersite.com

不幸的是我不知道怎么做？

Answer 1

var table_html = '<table><tbody>';
for(var el in My.Shortcuts) {
    var coresp_elem = My.Plugins[My.Shortcuts[el]];
    table_html += '<tr>';
    table_html += '<td>' + el + '</td>';
    table_html += '<td>' + My.Shortcuts[el] + '</td>';
    // replace line below with for..in loop iterating over coresp_elem 
    // properties if you are dealing with multiple properties (more info below)
    table_html += '<td>' + coresp_elem.url + '</td>';
    table_html += '</tr>';
}
table_html += '</tbody></table>';

alert(table_html);

假设您要在闭包内使用它，并且可以使用My.Shortcuts和My.Plugins对象的范围访问，那么应该可以正常工作。

这将生成html字符串，然后您可以将其放在页面上的某个位置：

$('.somewhere_on_a_page').html(table_html);

如果你想要列出My.Plugins对象的所有属性（例如url，例子，名称，标题，作者或者你可以拥有的任何东西） - 你可以在这个迭代中添加另一个for..in循环在这些属性列出所有这些 - 你应该能够从这里处理它我相信 - 如果需要帮助让我知道！

汤姆

Answer 2

var table = $('<table>');

for (var key in My.Shortcuts) {
  if (My.Shortcuts.hasOwnProperty(key)) {
    var row = $('<tr>');
    var shortcut = My.Shortcuts[key];
    $('<td>').text(key).appendTo(row);
    $('<td>').text(shortcut).appendTo(row);

    if (My.Plugins.hasOwnProperty(shortcut) && typeof My.Plugins[shortcut] === 'object') {
      $('<td>').text(
        (My.Plugins[shortcut].hasOwnProperty('url') ?
                           My.Plugins[shortcut].url : '') +

        (My.Plugins[shortcut].hasOwnProperty('example') ?
               '(' + My.Plugins[shortcut].example + ')' : '')
      ).appendTo(row);
    }
    row.appendTo(table);
  }
}

这会动态创建一个表元素，该元素将存储在'table'变量中。然后，您可以根据需要将其添加到文档中。它还将在括号中包含示例文本（如果有）。

将JS内容的格式化输出转换为HTML表

2 个答案: