Вывод таблицы в новой вкладке браузера

@muscledboy · Регистрация: 15.06.2015

Студворк — интернет-сервис помощи студентам

Написал код, который после ввода количества полей выводит таблицу. Надо чтобы таблица выводилась на отдельную вкладку браузера. Помогите, пожалуйста, очень нужен этот код для курсовой.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
    <meta charset = "windows - 1251">
    <title>Таблица имен</title>
   <style>
   table {
      width: 50%;
      border: 3px solid black;
      border-collapse: collapse;
      margin: auto;
   }
   td, th {
      padding: 2px;
      border: solid black;
   }
   th {
     background: deepskyblue;
   }
   .center {
     text-align: center;
   }
   tbody tr:hover {
     background: cyan;
  }
   </style>
</head>
<body>   
  <script>
      function randomValue(min, max) {
              return Math.floor(Math.random() * (max - min + 1) + min);
      }
     function openWin() {
 
myWindow=window.open('','','width=200,height=100'); myWindow.document.write(document.getElementById('names').outerHTML);
 
myWindow.focus();
 
}
      amount = +prompt("Введите количество полей:");
           document.write ('<p align = "center" style = "font-size: 30px">Таблица персональных данных</p>');
           document.write ('<table id = "names">');
           document.writeln('<tr> <th>№<\/th><th>Ф.И.О.<\/th><th>Год рождения<\/th><th>Вес<\/th> <\/tr>');
           for (var i = 0; i < amount; i++) {
                   var name = prompt("Введите Ф.И.О." + (i + 1) +" - го человека");
                   if (name.trim() == ""){
                   do {
                        name =  prompt("Ви ничего не ввели. попробуйте еще раз:")
                    } while (name.trim() == "");}
                  document.writeln('<tr class = "center">');
                      document.writeln('<td>' + (i + 1) + '<\/td>');
                      document.writeln('<td>' + name + '<\/td>');
                      document.writeln('<td>' + randomValue(1900, 2016) + '<\/td>');
                      document.writeln('<td>' + randomValue(3, 150) + '<\/td>');
                   document.writeln('<\/tr>');     
             }
            document.write ('</table>');
   </script>
   </body>
</html>

Добавлено через 24 минуты
помогите!!!!)

Доктор Зойдберг · 01.06.2016, 14:54

Оговорюсь сразу. Я просто ваш код немного переделал.
По факту вам нужно всё по другому делать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
    <meta charset = "windows - 1251">
    <title>Таблица имен</title>
    <style>
        table {
            width: 50%;
            border: 3px solid black;
            border-collapse: collapse;
            margin: auto;
        }
 
        td, th {
            padding: 2px;
            border: solid black;
        }
 
        th {
            background: deepskyblue;
        }
 
        .center {
            text-align: center;
        }
 
        tbody tr:hover {
            background: cyan;
        }
    </style>
</head>
<body>   
    <script>
        tbl= '';
        amount = +prompt("Введите количество полей:");
 
        tbl += '<p align = "center" style = "font-size: 30px">Таблица персональных данных</p> \
        <table id = "names"><tr><th>№<\/th><th>Ф.И.О.<\/th><th>Год рождения<\/th><th>Вес<\/th><\/tr>';
 
        for (var i = 0; i < amount; i++) {
            var name = prompt("Введите Ф.И.О." + (i + 1) +" - го человека");
 
            if (name.trim() == "") {
                do {
                    name =  prompt("Ви ничего не ввели. попробуйте еще раз:");
                } while (name.trim() == "")
            }
 
            tbl += '<tr class = "center"> \
            <td>' + (i + 1) + '<\/td> \
            <td>' + name + '<\/td> \
            <td>' + randomValue(1900, 2016) + '<\/td> \
            <td>' + randomValue(3, 150) + '<\/td> \
            <\/tr>';
        }
        tbl += '</table>';
 
        var newWin = window.open("about:blank", "table_name", "left=300,width=600,height=500");
        newWin.document.write(tbl);
 
        function randomValue(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
   </script>
   </body>
</html>

И да.
Стили с данной страницы сами по себе на той не будут работать.

@muscledboy · 01.06.2016, 18:32 **[ТС]**

Доктор Зойдберг, спасибо, могу еще Вас попросить о помощи?

Добавлено через 3 минуты
Доктор Зойдберг, почему не работает код,если я сделаю так:

Файл CW.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
 
<head>
    <meta charset = "utf-8">
    <title>Таблица имен</title>
    <script src = "tablescript.js"> </script>
</head>
 
<body> </body>
 
</html>

Файл tablestyle.css:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table {
          width: 50%;
          border: 3px solid black;
          border-collapse: collapse;
          margin: auto;
}
td, th {
           padding: 2px;
           border: solid black;
}
th {
      background: deepskyblue;
}
.center {
              text-align: center;
}
tbody tr:hover {
                         background: cyan;
}

Файл tablescript.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
tbl= '';
        function tableMaker(amount) {
        amount = +prompt("Введите количество полей:");
 
        tbl += '<p align = "center" style = "font-size: 30px">Таблица персональных данных</p> \
        <table id = "names"><tr><th>№<\/th><th>Ф.И.О.<\/th><th>Год рождения<\/th><th>Вес<\/th><\/tr>';
 
        for (var i = 0; i < amount; i++) {
            var name = prompt("Введите Ф.И.О." + (i + 1) +" - го человека");
 
            if (name.trim() == "") {
                do {
                    name =  prompt("Ви ничего не ввели. попробуйте еще раз:");
                } while (name.trim() == "")
            }
 
            tbl += '<tr class = "center"> \
            <td>' + (i + 1) + '<\/td> \
            <td>' + name + '<\/td> \
            <td>' + randomValue(1900, 2016) + '<\/td> \
            <td>' + randomValue(3, 150) + '<\/td> \
            <\/tr>';
        }
        tbl += '</table>';
 
        var newWin = window.open("about:blank", "table_name", "left=300,width=600,height=500");
        newWin.document.write(tbl);
        }
 
        function randomValue(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

Добавлено через 6 минут
Доктор Зойдберг, ну то что в фукции tablemaker() лишний параметр понятно

Добавлено через 11 минут
Доктор Зойдберг, а скрипт подключить так:

HTML5
1
    <script src = "tablescript.js"> </script>

, но почему не работает?

Доктор Зойдберг · 02.06.2016, 10:26

HTML5
1
2
3
4
5
6
7
8
9
<html>
<head>
    <title>Таблица имен</title>
    <script src="script.js"></script>
</head>
<body>
    <input type="button" onclick="tableMaker()" value="Создать таблицу">
</body>
</html>

style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
table {
    width: 50%;
    border: 3px solid black;
    border-collapse: collapse;
    margin: auto;
}
 
td, th {
    padding: 2px;
    border: solid black;
}
 
th {
    background: deepskyblue;
}
 
.center {
    text-align: center;
}
 
tbody tr:hover {
    background: cyan;
}

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function tableMaker() {
    tbl= '';
    amount = +prompt("Введите количество полей:");
 
    //Ссылка на css
    var css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'style.css';
    css.type = 'text/css';
 
    tbl += '<p align = "center" style = "font-size: 30px">Таблица персональных данных</p> \
    <table id = "names"><tr><th>№<\/th><th>Ф.И.О.<\/th><th>Год рождения<\/th><th>Вес<\/th><\/tr>';
 
    for (var i = 0; i < amount; i++) {
        var name = prompt("Введите Ф.И.О." + (i + 1) +" - го человека");
 
        if (name.trim() == "") {
            do {
                name =  prompt("Ви ничего не ввели. попробуйте еще раз:");
            } while (name.trim() == "")
        }
 
        tbl += '<tr class = "center"> \
        <td>' + (i + 1) + '<\/td> \
        <td>' + name + '<\/td> \
        <td>' + randomValue(1900, 2016) + '<\/td> \
        <td>' + randomValue(3, 150) + '<\/td> \
        <\/tr>';
    }
    tbl += '</table>';
 
    var newWin = window.open("about:blank", "table_name", "left=300,width=600,height=500");
    newWin.document.write(tbl);
    newWin.document.getElementsByTagName('head')[0].appendChild(css);
}
 
function randomValue(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

@muscledboy · 03.06.2016, 17:17 **[ТС]**

Доктор Зойдберг, спасибо

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Вывод таблицы в новой вкладке браузера

Решение

Решение

@muscledboy 0 / 0 / 0 Регистрация: 15.06.2015 Сообщений: 135
	03.06.2016, 17:17 [ТС]
	Доктор Зойдберг, спасибо 0