При клике меняется span на textarea?

как сделать так, чтобы при клике на ячейку она менялась на текстареа, чтобы можно было вписать текст? А если скопированных строк вставляется несколько в ячейку, то они распределялись по ячейкам вниз? (как в exel'ке)
вот пример таблички - https://codepen.io/gplitt/pen/qrVGMJ
  • Вопрос задан
  • 311 просмотров
Пригласить эксперта
Ответы на вопрос 5
@AdrianBlair
Демонстрация
<!DOCTYPE html>
<html>
	<head>
		<s</a>cript src="http://code.jquery.com/jquery-3.1.1.min.js">
		</script>
		<script>
		$(document).ready(function() {
		  var alphabet = ["A",  "B",  "C",  "D",  "E",  "F",  "G",  "H",  "I",  "J",  "K",  "L",  "M",  "N",  "O",  "P",  "Q",  "R",  "S",  "T",  "U",  "V",  "W",  "X",  "Y",  "Z"];


		  $("body").append("<table><tr class='alphabet'><td class='none'>|||<\/td><\/tr><\/table>");
		  for(var i = 0; i < alphabet.length; i++) {
		      $(".alphabet").append("<td>"+ alphabet[i] +"<\/td>");
		      /*if(alphabet.length-1 == i) {
		          for(var x = 0; x <= 25; x++) {
		              for(var y = 0; y <= 25; y++) {
		                  $(".alphabet").append("<td>"+ alphabet[x] + alphabet[y] +"<\/td>");
		              }
		          }
		      }*/
		  }
		  
		  for(var x = 1; x <= 1024; x++) {
		      $("table").append("<tr class='user'><td class='count'>"+ x +"<\/td><\/tr>");
		  }
		  
		  for(var i = 0; i < alphabet.length; i++) {
		      $(".user").append("<td id='editable'><\/td>");
		      /*if(alphabet.length - 1 == i) {
		          for(var x = 0; x <= 25; x++) {
		              for(var y = 0; y <= 25; y++) {
		                  $(".user").append("<td id='editable'><\/td>");
		              }
		          }
		      }*/
		  }

		  $("td#editable").dblclick( function(event){
		      $("input#foredit").remove();
		      var value = $(this).text();
		      $(this).html("<input id='foredit' onkeypress='check()' focused placeholder='input' value='" + value + "'>").focus();;
		  });
		});
		</script>
		<style>
		body {
		  font-family: Arial, sans-serif;
		  margin: 0;
		}

		table {
		  border-spacing: 0;
		}

		:focus {
		  outline: none;
		}

		td {
		  border: 1px solid #D0D0D0;
		  min-width: 100px;
		  padding: 0 15px;
		  height: 40px;
		}

		td.none {
		  min-width: 0;
		  width: 25px!important;
		}

		td.count {
		  background: #E0E0E0;
		  min-width: 0;
		  width: 25px!important;
		  padding: 0;
		  text-align: center;
		}

		tr.alphabet td {
		  height: 30px;
		  text-align: center;
		  background: #E0E0E0;
		  background: -webkit-linear-gradient(to top, #E0E0E0 , #F2F2F2);
		  background: linear-gradient(to top, #E0E0E0 , #F2F2F2);
		  border: none;
		  border-right: 1px solid #D0D0D0; 
		}

		#overlay {
		  z-index: 3;
		  position: fixed;
		  background-color: transparent;
		  width: 100%;
		  height: 100%;
		  top: 0;
		  left: 0;
		  cursor: pointer;
		  display: none;
		}
		</style>
	</head>
	<body>
	</body>
</html>
Ответ написан
@VisualIdeas
Вот как копировать с разделение - будет сложновато)))
Но вот ячейку править caniuse.com/#search=contenteditable с таким аттрибутом
Ответ написан
Комментировать
Justique
@Justique
может подойдёт аттрибут contenteditable="true"
Ответ написан
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Ответ написан
Комментировать
@individ11 Автор вопроса
contenteditable="true" не подходит, т.к. в таком случае, нельзя выделить значения всего столбца и соответственно вставить в столбец другие скопированные значения, например из того же exel
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 15:52
3000 руб./за проект
25 нояб. 2024, в 15:43
1500 руб./за проект