Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2019, 00:47
Новичок на форуме
Отправить личное сообщение для Darveus Посмотреть профиль Найти все сообщения от Darveus
 
Регистрация: 20.04.2019
Сообщений: 1

Создание таблицы стирает все остальное на странице
function addTable() { //созданиe таблицы
	var k = 0, s = 10, p = 65;
	//var str = document.getElementById('str').value;
	//var stlb = document.getElementById('stlb').value;
    var str = 2;
	var stlb  = 3;
	document.write ('<table width="50%" border="2">');
    for (i=0; i<=str; i++) {
      document.writeln("<tr>");	
      for (j=0; j<=stlb; j++) {
	  if(i === 0 && j === 0){
	  document.write("<td width= 20%>" + 'FSM' + "<\/td>"); 
	  }
	  else if(i===0 && j>0){  
		document.write("<td>" + j + "<\/td>");
	  }
	  else if(j===0 && i>0){
	   document.write("<td width= 20%>" + String.fromCharCode(p) + "<\/td>");
	   p++;
	  }
		else {
			document.write("<td>" + "<input style = width:20px id = " + k + "></input>" + "\/" + "<input style = width:20px id=" + s + "></input>" + "<\/td>");
			k++;
			s++;
			}
	  }
	  document.writeln("<\/tr>");
    }
    document.write ("<\/table> ");
}

Вызывая данную функцию по нажатию кнопки у меня стирается все остальное со страницы и выводится одна лишь таблица. Как можно решить данную проблему?
При этом если я вызываю эту функцию просто в теге скрипта в html-файле, то никаких проблем дальнейшая работа не вызывает. Но мне необходимо именно по кнопке это сделать, для динамического создания этой таблицы. Пытался не использовать метод write, так как предположил что в нем ошибка, но через innerHTML и appendChild вообще ничего не работает.
Ответить с цитированием
  #2 (permalink)  
Старый 20.04.2019, 02:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Darveus
document.write
Добавление и удаление узлов
Мультивставка: insertAdjacentHTML и DocumentFragment
Ответить с цитированием
  #3 (permalink)  
Старый 20.04.2019, 07:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Darveus,
document.write для загруженных документов не используют.
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2019, 06:01
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Darveus, примерно так:

function addTable() { //созданиe таблицы
	
	var k = 0, s = 10, p = 65;
	//var str = document.getElementById('str').value;
	//var stlb = document.getElementById('stlb').value;
    var str = 2;
	var stlb  = 3;

	let str = ``;

    for (i=0; i <=str; i++) {

      let substr = ``;

      for (j=0; j<=stlb; j++) {

		  	if (i === 0 && j === 0){

				substr = "<td width= 20%>" + "FSM" + "</td>";

		  	} else if (i===0 && j>0) {  
				
				substr = `<td>" + j + "</td>`;
	  		
	  		} else if (j===0 && i>0){

	   			substr = "<td width= 20%>" + String.fromCharCode(p) + "<\/td>";
	   			p++;

  			} else {

  				substr = "<td>" + "<input style = width:20px id = " + k + "></input>" + "\/" + "<input style = width:20px id=" + s + "></input>" + "</td>";
				k++;
				s++;

			}
	  	}

	  	substr = `<tr>${substr}</tr>`;

    }

    str = `<table width="50%" border="2">${substr}</table>`;

    return str;

}


Есть второй вариант через document.createElement() ну тут сами разберитесь уже
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести все картинки что есть на странице padonak Общие вопросы Javascript 14 27.11.2011 23:20
Все <a href=""> на странице. Viral Элементы интерфейса 7 17.11.2011 16:07
Покрасить все ячейки таблицы с заданным id alexan0308 Ваши сайты и скрипты 11 17.04.2011 15:01
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37