zoukankan      html  css  js  c++  java
  • Jquery 操作table行增减

              开门见山,我就用例子给大家解释吧?

         页面中的元素:

       <table cellspacing="0" id="tQuestion" border="1" rules="all" class="mainTab" style=" 100%">
            <tr>
               <th>
                   大题名称
            </th>
                <th>
                    大题说明
             </th>
                 <th>
                    操作
             </th>
            </tr>
        </table>
    

      js操作元素:

    //新增试卷_添加行
    function addtr(id) {
        tr_id = $("#tQuestion>tbody>tr:last").attr("id");
        tr_id++;
        $('#' + id).append(GetStr(tr_id));
    }
    //新增试卷_删除行
    function deltr(id) {
        tr_id = $("#tQuestion>tbody>tr:last").attr("id");
        if (tr_id != 1) {
            $('#' + tr_id).remove();
        }
    }
    //动态添加一行
    function GetStr(tr_id) {
        var str = "<tr id='" + tr_id + "'><td><input type=\"text\" id=\"TxtTitle_" + tr_id + "\" name=" + tr_id + " value=\"\"  style=\"90%\"/></td>";
        str += "<td><textarea style=\"90%; border: 1px solid rgb(164, 194, 204);\" id=\"TxtPrompt_" + tr_id + "\" cols=\"20\" rows=\"2\" name=" + tr_id + "></textarea></td>";
        str += "<td><input type=\"button\" class=\"normalBtn\" id=\"btnQuestionAdd\" value=\"新增\" name=\"btnQuestionAdd\" onclick=\"addtr('tQuestion')\">";
        str += " <input type=\"button\" class=\"normalBtn\" id=\"btnQuestionDel\" value=\"删除\" name=\"btnQuestionDel\" onclick=\"deltr('tQuestion')\"></td>";
        str += "</tr>";
        return str;
    }
    $(function () {
        $('#tQuestion').append(GetStr(1));
    })
    

      欧了,希望对大家有所帮助,偶尔想不起来我也可以参考一下!呵呵!!!

  • 相关阅读:
    牛客练习赛81 B. 小 Q 与彼岸花(DP/Trie/树状数组/FWT/好题)
    HDU6570 Wave(DP)
    HDU6567 Cotree(树的重心/树形DP)
    P1712 [NOI2016] 区间(双指针/线段树)
    P1063 [NOIP2006 提高组] 能量项链(区间DP)
    Jquery
    Jquery
    Jquery
    Jquery 学习
    JS学习
  • 原文地址:https://www.cnblogs.com/BeyondWJsel/p/2599631.html
Copyright © 2011-2022 走看看