Question

您好我正在尝试将数据从数组显示到html输出表。但是我需要在选择提交按钮后在同一页面上显示该表。如果我使用document.write它将会另一个页面。另外通过使用document.write，我无法并排显示两列。

   document.write("<table>");
    document.write('<tr><th>First Name</th></tr>');

    for(var h = 0; h< data.length;h++){
        document.write('<tr><td>' + data[h] + '</td></tr>');

    }
            document.write('</table>');

以上代码显示第一个表格。

  document.write("<table>");
    document.write('<tr><th>Last Name</th></tr>');

    for(var g = 0; g< data.length;g++){
        document.write('<tr><td>' + data1[g] + '</td></tr>');

    }
            document.write('</table>');

上面的代码给了我第二列，但它没有显示在第一列旁边。仅供参考，我从localstorage获取数据并将其存储为数组。请帮助。感谢

Answer 1

为什么你不能这样做？

document.write("<table>");
document.write('<tr><th>First Name</th><th>Last Name</th></tr>');
  for(var h = 0; h< data.length;h++){
    document.write('<tr><td>' + data[h] + '</td>');
    document.write('<td>' + data1[h] + '</td></tr>');
  }
document.write('</table>');

因为两个for循环仅循环数据

然后它将显示为

First Name | Last Name
----------------------
firstName1 | lastName1
firstName2 | laseName2

Answer 2

表是块元素，将在新行上。如果你想让它们彼此相邻，可以使用float。例如。

CSS

<style type="text/css">

    .tableData {
        float: left;
    }

</style>

脚本

document.write("<table class='tableData'>");
    document.write('<tr><th>First Name</th></tr>');

    for(var h = 0; h< data.length;h++){
        document.write('<tr><td>' + data[h] + '</td></tr>');

    }
            document.write('</table>');


  document.write("<table class='tableData'>");
    document.write('<tr><th>Last Name</th></tr>');

    for(var g = 0; g< data.length;g++){
        document.write('<tr><td>' + data1[g] + '</td></tr>');

    }

并排显示两列javascript

2 个答案: