zoukankan      html  css  js  c++  java
  • 夺命雷公狗jquery---10小实例-表格插入内容

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery.js"></script>
            <script>
                window.onload = function(){
                    document.getElementById('btnok').onclick = function(){
                        //1.获取表单元素值
                        var hang = $('#hang').val()-1;
                        var lie = $('#lie').val()-1;
                        var content = $('#content').val();
                        //2.通过层次选择器获取表格元素
                        $('tr:eq('+hang+')>td:eq('+lie+')').html(content);
                        
                        
                        
                    }
                }
            </script>
        </head>
        <body>
            <table border="1" width="800">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <hr />
            cols:<input type="text" id="hang">
            <hr />
            rows:<input type="text" id="lie">
            <hr />
            content:<textarea id="content"></textarea>
            <hr />
            <input type="button" id="btnok" value="录入" />
        </body>
    </html>
  • 相关阅读:
    原生js大总结十一
    jQuery快速入门知识重点
    原生js大总结九
    原生js大总结十
    原生js大总结八
    原生js大总结六
    原生js大总结七
    原生js大总结四
    原生js大总结五
    移动端适配
  • 原文地址:https://www.cnblogs.com/leigood/p/4903335.html
Copyright © 2011-2022 走看看