Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Ловим onclick на таблице


Автор: DragonFire 24.11.2005, 22:37
Вопрос такой: У меня есть таблица. Мне нужно сделать так, чтобы при выборе пользователем пункта таблицы, выводился текст. Причем текст разный, в соответствии с выбранным пунктом, но на одном и том же месте. Сразу скажу, что текст вывоже с помощью DIV.
P.S. Если можно, поподробнее, т.к. я в этих хтмелях совсем ламер.

Автор: GoodBoy 25.11.2005, 10:16
Это тебе в JavaScript...

Автор: GIK 25.11.2005, 10:51
Какого плана текст? В текстовом поле, просто текст в дескрипторах DIV или еще что.

Автор: DragonFire 25.11.2005, 11:32
Да просто текст нужно вывести. Вот:
Код

<html>
<head>
    <title>1</title>
</head>
<body>

<Table border=1 width=150 CELLPADDING=5 CELLSPACING=0 Frame="all" background="TableBack.jpg" style="position:absolute;top:50px;left:5px;">
<TR><TD>Текст1</TD></TR>
<TR><TD>Текст2</TD></TR>
</TABLE>
</TD>

<div style="position:absolute;top:100px;left:180px;visibility=show;">
<Pre>
<H3 align="Center"> !!!  </H3>
<H2 align="Center"> ! </H2>
1111
Текст1
1111
</PRE>
</div>

<div style="width:82%;position:absolute;top:230px;left:170px;visibility=hidden;">
<Pre>
<H3 align="Center"> !!! </h3>
2222
Текст2
2222
</PRE>
</div>

</body>
</html>


P.S. Думал в HTML этой теме место...

Автор: Гость_12345 25.11.2005, 13:30
Код

<body>
<style> td{cursor:hand}</style>
<script>
txtA=['<H3 align="Center"> 1. Заголовок  </H3>\n<H2 align="Center"> Подзаголовок </H2><br>1111<br>Текст1<br>1111'
    ,'<font color=darkblue><H3 align="Center"> 2. Заголовок  </H3>\n<H2 align="Center"> Подзаголовок </H2><br>1111<br>Текст2<br>1111</font>'];
function viewSomeText(I){document.getElementById('someText').innerHTML=txtA[I];}
</script>
<Table border=1 width=150 CELLPADDING=5 CELLSPACING=0 Frame="all" background="TableBack.jpg" style="position:absolute;top:50px;left:5px;">
<TR><TD onClick=viewSomeText(0)>Текст1</TD></TR>
<TR><TD onClick=viewSomeText(1)>Текст2</TD></TR>
</TABLE>
</TD>

<div style="position:absolute;top:100px;left:180px;visibility=show;border:2;border-style:solid;padding:6">
<pre id=someText>
Место, где будет текст.
</PRE></div>
</body></html>

Автор: DragonFire 25.11.2005, 15:49
Пасибо =)

Автор: GIK 25.11.2005, 16:03
В дополнении к изложенному гостем 12345 могу сказать что обращение можно сделать проктически любым эллементам, и соответственно менять их значения(значения атрибутов, текстовые значения, дескрипторы).
Код

<html>
 <head>
  <script type="text/javascript">
  <!--   
         function gen2()
 { var idform=document.getElementById("f2");
   idform.firstChild.firstChild.firstChild.firstChild.firstChild.nodeValue="Новый текст"; //Меняем текстовое значение эллемента-столбца. 
 } 

         function gen1()
 { var idform=document.getElementById("f1");
   idform.firstChild.setAttribute("value", "Новый текст");  //Изменяем атрибуты   
 }     
   
   
         function gen3()
 { var idform=document.getElementById("divID");
   idform.firstChild.firstChild.nodeValue="Новый текст";
   
  }
   //-->
  </script>
 </head>
<body>
 <form id="f1">
 <input type="text" name="n1" value="текст1"><br>
 <input type="text" name="n2" value="текст2"><br>
 <input type="text" name="n3" value="текст3"><br>
 </form>
 <form id="f2">
    <table border=3>
     <tr><td>Первый столбец</td><td>Второй столбец</td><td>Третий столбец</td></tr>  
     <tr><td>Первый столбец</td><td>Второй столбец</td><td>Третий столбец</td></tr>  
     <tr><td>Первый столбец</td><td>Второй столбец</td><td>Третий столбец</td></tr>
    </table>
 </form>
 <div id="divID" style="position:absolute;top:100px;left:250px;visibility=show;">
   <h3>
  Текст
   </h3>
</div>
 <input type="button" onclick="gen2()" value="Изменить текст в столбцах"><br>
 <input type="button" onclick="gen1()" value="Изменить атрибуты текстовых полей"><br>
   <input type="button" onclick="gen3()" value="Изменить"><br>
</body>
</html>

Автор: DragonFire 26.11.2005, 09:57
Пасибо

Автор: DragonFire 27.11.2005, 10:33
Вот я все сделал, мне больше понравился метод Гостя 12345, потому что там одна функция... Хотя второй - более простой и в нем легче разобратся.
Только вот мне непонятно, как в эти функции запихнуть не коротенькую фразу, а страницу текста, желательно отформатированого? smile

Автор: GIK 28.11.2005, 10:39
Не знаю что ты представляеш под страницей текста, но большой текст можно взять например из textarea, но в принципе можеш взять откуда хош smile
Код

<html>
 <head>
  <script type="text/javascript">
  <!--
     function f1()
{ var txt=document.getElementById("textarea1").value;
   var idform1=document.getElementById("form1");
   var idform2=document.getElementById("form2");
   
     var sizeVal = idform2.elements[0].value;
     var colorVal = idform2.elements[1].value;
     var linkVal = idform2.elements[2].value;
    //Форматирование, что-то можно убрать, что-то добавить. 
   if(idform1.elements[0].checked) txt=txt.big(); 
   if(idform1.elements[1].checked)txt=txt.bold();
    txt=txt.fontcolor(colorVal);
    txt=txt.fontsize(sizeVal);
    txt=txt.link(linkVal);

  winOpen=window.open("", "", "width=240, height=240");
  winOpen.document.write(txt);
  winOpen.document.close();
   }
   //-->
  </script>
 </head>
<body>
  <textarea rows=17 cols=50 id="textarea1">
 Балшой текст, где многа букв слов и предлажений, который можна атформатировать.
  </textarea>
  <input type="button" onclick="f1()" value="Паказать">
  <form id="form2">
  <input type="text" name="nnn1" value="размер" onfocus=this.value='' size=12><br>
  <input type="text" name="nnn2" value="цвет"  onfocus=this.value='' size=12><br>
  <input type="text" name="nnn3" value="адрес"  onfocus=this.value='' size=12><br>
  </form>
 <form id="form1">
  <input type="radio" name="r">в формат big<br> 
  <input type="radio" name="r">в формат bold<br>
  </form> 
 </body>
</html>

Добавлено @ 10:44
По поводу сразу отформатированного текста, то можеш убрать условие
if(idform1.elements[0].checked) txt=txt.???????();
и прописать в функции просто
txt=txt.big();
txt=txt.bold();
txt=txt.fontcolor(colorVal);
txt=txt.fontsize(sizeVal);
txt=txt.link(linkVal);

и создать еще всяких форматов. smile

Автор: DragonFire 28.11.2005, 21:20
Не, мне нужно, чтобы текст не в отдельном окне выводился, а в том же в заданном месте, как в примере гостя 12345...

Автор: GIK 29.11.2005, 11:59
Место, толшину, высоту задаш сам.
Код

<html>
 <head>
  <script type="text/javascript">
  <!--
     function f1()
{ var txt=document.getElementById("textarea1").value;
   var idform1=document.getElementById("form1");
   var idform2=document.getElementById("form2");
   
     var sizeVal = idform2.elements[0].value;
     var colorVal = idform2.elements[1].value;
     var linkVal = idform2.elements[2].value;
    //Форматирование, что-то можно убрать, что-то добавить. 
   if(idform1.elements[0].checked) txt=txt.big(); 
   if(idform1.elements[1].checked)txt=txt.bold();
    txt=txt.fontcolor(colorVal);
    txt=txt.fontsize(sizeVal);
    txt=txt.link(linkVal);
 document.getElementById('someText').innerHTML=txt;
 document.getElementById('divID').style.visibility="visible";

}

   //-->
  </script>
 </head>
<body>
   <textarea rows=17 cols=50 id="textarea1">
 Балшой текст, где многа букв слов и предлажений, который можна атформатировать.
  </textarea>
  <input type="button" onclick="f1()" value="Паказать">
  <form id="form2">
  <input type="text" name="nnn1" value="размер" onfocus=this.value='' size=12><br>
  <input type="text" name="nnn2" value="цвет"  onfocus=this.value='' size=12><br>
  <input type="text" name="nnn3" value="адрес"  onfocus=this.value='' size=12><br>
  </form>
 <form id="form1">
  <input type="radio" name="r">в формат big<br> 
  <input type="radio" name="r">в формат bold<br>
  </form> 
 <div style="position:absolute;top:340px;left:180px;border:2;border-style:solid;padding:6; wigth:100px; height=120px">
<pre id=someText>
Место, где будет текст.
</PRE></div>
 </body>
</html>

Автор: Гость_12345 29.11.2005, 13:29
Большие тексты удобнее всего прятать в текущую страницу в невидимые слои. Потом достаёте их по innerHTML - и в тот же innerHTML другого слоя. А ещё лучше заготовить слои на нужном месте и включать видимость:
Код
<style> td{cursor:hand}
 pre{position:absolute;visibility:hidden;top:400px;left:180px;width:300;border:2;border-style:solid;padding:6}
  pre.vis{visibility:visible;}
</style>
<script>d=document;
function viewSomeText(I){
    for(i=0;i<d.getElementsByTagName('pre').length;i++)d.getElementById('someText'+i).className='';
    d.getElementById('someText'+I).className='vis';}
</script>
<Table border=1 width=120 CELLPADDING=5 CELLSPACING=0 Frame="all" background="TableBack.jpg" style="position:absolute;top:350px;left:45px;">
<TR><TD onClick=viewSomeText(1)>Текст1</TD></TR>
<TR><TD onClick=viewSomeText(2)>Текст2</TD></TR></TABLE>

<pre id=someText0 class=vis>Место, где будет текст.</pre>

<pre id=someText1>
 А, вот он уже появился.<H3 align=center>1. Заголовок</H3><H2 align=center>Подзаголовок</H2><br>1111<br>Текст1<br>1111
</pre>

<pre id=someText2 style=color:darkblue>
 А здесь ещё, сколько ж можно?<H3 align=center>2. Заголовок</H3><H2 align="Center">Подзаголовок</H2><br>1111<br>Текст2<br>1111
</pre>

Автор: DragonFire 29.11.2005, 14:48
Спасибо, вот это я и хотел сделать!

Автор: Sardar 1.12.2005, 21:22
Цитата
Большие тексты удобнее всего прятать в текущую страницу в невидимые слои

В последнее время стало удобно прятать большие текста в коментарии, т.к. они сохраняються в DOM дереве smile

2Гость_12345 это принцип? Регистрируйся, уже столько полезных постов, а всё как чужой smile
Предпологаеться в будущем сделать общий ресурс, завязанный на форуме, где форумчане могут выкладывать резюме. Там же "послужной список" в виде оценок к статьям в FAQ, рейтинг на форуме, и многое другое. Регистрируйся.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)