用js如何实现在一个页面上点击文字。然后对应的地方出来你点击的文字

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea追加</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <style>
            table {
                border-collapse:collapse;
                border-spacing:0px;
                border: 1px solid #666;
            }
            th {
                border-bottom:1px solid #666;
                font-weight:bold;
                padding: 5px 2px 2px 2px;
            }
            tr td {
                padding: 10px 30px;
            }
            .wrapper {
                float:left;
            }
            #txtShow {
                margin-left:50px;
                width:100px;
                height:100px;
            }
        </style>
        <script>
            $(function() {                 
                $("tbody > tr > td").click(function(){                               
                    if ($(this).find("a").length > 0)
                        $("#txtShow").append($(this).children().html());
                    else                   
                        $("#txtShow").append($(this).html());
                })
            })
        </script>
        
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <table>
                    <thead>
                        <th>姓名</th><th>性别</th><th>暂住地</th></tr>
                    </thead>
                    <tbody>
                        <tr>                            <td><a href="#">张三</a></td>
                            <td><a href="#">男</a></td>
                            <td><a href="#">深圳</a></td>
                        </tr>
                        <tr>                            <td><a href="#">李四</a></td>
                            <td><a href="#">男</a></td>
                            <td><a href="#">长沙</a></td>
                        </tr>
                        <tr>                            <td><a href="#">王五</a></td>
                            <td><a href="#">男</a></td>
                            <td><a href="#">广州</a></td>
                        </tr>
                        <tr>                            <td>>赵六</td>
                            <td>男</td>
                            <td>珠海</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="wrapper">
                <textarea id="txtShow"></textarea>
            </div>
        </div>
    </body>
</html>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title> New Document </title>
      <script type="text/javascript">
        <!--
        function s(o,c){
            document.getElementById('area'+c).value = o.innerHTML;
        }
        -->
      </script>
     </head>
     
     <body>
      <table>
        <tr>
          <td onclick="s(this,1)">文字1</td>
          <td><textarea id="area1"></textarea></td>
        </tr>
        <tr>
          <td onclick="s(this,2)">文字2</td>
          <td><textarea id="area2"></textarea></td>
        </tr>
        <tr>
          <td onclick="s(this,3)">文字3</td>
          <td><textarea id="area3"></textarea></td>
        </tr>
      </table>
     </body>
    </html>
      

  2.   


    谢谢。效果可以实现，但是代码好像不是这么写的。
    js里面的代码什么意思 可以解释一下么，谢啦
        <script>
                $(function() {                 
                    $("tbody > tr > td").click(function(){                               
                        if ($(this).find("a").length > 0)
                            $("#txtShow").append($(this).children().html());
                        else                   
                            $("#txtShow").append($(this).html());
                    })
                })
            </script>
      

  3.   

    谢谢。效果可以实现，但是代码好像不是这么写的。
    js里面的代码什么意思 可以解释一下么，谢啦
        <script>
                $(function() {                 
                    $("tbody > tr > td").click(function(){                               
                        if ($(this).find("a").length > 0)
                            $("#txtShow").append($(this).children().html());
                        else                   
                            $("#txtShow").append($(this).html());
                    })
                })
            </script> 
      

  4.   

    效果可以实现。这个只可以添加一次。再点击就没反应了。光标定位呢怎么操作？就是你定位在哪个地方就可以在哪个地方添加。
     function s(o,c){
            document.getElementById('area'+c).value = o.innerHTML;
        }
    这里面的 o  c是什么意思
      

  5.   

    o c 是變量。
    o就是你點擊的那個<td>
    c就是后面的參數1,2,3
      

  6.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title> New Document </title>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript">
        <!--
        function s(o,c){
    $('#area'+c).insertContent(o.innerHTML); 
        } $(function() {  
    (function($) {  
    $.fn  
    .extend({  
    insertContent : function(myValue, t) {  
    var $t = $(this)[0];  
    if (document.selection) { // ie  
    this.focus();  
    var sel = document.selection.createRange();  
    sel.text = myValue;  
    this.focus();  
    sel.moveStart('character', -l);  
    var wee = sel.text.length;  
    if (arguments.length == 2) {  
    var l = $t.value.length;  
    sel.moveEnd("character", wee + t);  
    t <= 0 ? sel.moveStart("character", wee - 2 * t  
    - myValue.length) : sel.moveStart(  
    "character", wee - t - myValue.length);  
    sel.select();  
    }  
    } else if ($t.selectionStart  
    || $t.selectionStart == '0') {  
    var startPos = $t.selectionStart;  
    var endPos = $t.selectionEnd;  
    var scrollTop = $t.scrollTop;  
    $t.value = $t.value.substring(0, startPos)  
    + myValue  
    + $t.value.substring(endPos,  
    $t.value.length);  
    this.focus();  
    $t.selectionStart = startPos + myValue.length;  
    $t.selectionEnd = startPos + myValue.length;  
    $t.scrollTop = scrollTop;  
    if (arguments.length == 2) {  
    $t.setSelectionRange(startPos - t,  
    $t.selectionEnd + t);  
    this.focus();  
    }  
    } else {  
    this.value += myValue;  
    this.focus();  
    }  
    }  
    })  
    })(jQuery);  
    });

    -->
      </script>
     </head>
      
     <body>
      <table>
        <tr>
          <td onclick="s(this,1)">文字1</td>
          <td><textarea id="area1"></textarea></td>
        </tr>
        <tr>
          <td onclick="s(this,2)">文字2</td>
          <td><textarea id="area2"></textarea></td>
        </tr>
        <tr>
          <td onclick="s(this,3)">文字3</td>
          <td><textarea id="area3"></textarea></td>
        </tr>
      </table>
     </body>
    </html>