JavaScriptにtdタグとtrタグを動的に追加する方法（コード）-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptにtdタグとtrタグを動的に追加する方法（コード）

不言

Aug 25, 2018 am 10:57 AM

java js

この記事の内容はJavaScriptでtdタグとtrタグを動的に追加する方法(コード)ですので、困っている方は参考にしていただければ幸いです。

//新增机器人信息的 
function insertRows(rr){
        //var tab=document.getElementById(&#39;tableid&#39;);
        var tb1 = $("#tableid"); 
        var tempRow=parseInt($("#tableid tr").size());

        var shu=parseInt(rr)+1;
        var ss="<option value=&#39;&#39;></option>";
        <c:forEach items="${robolist}" var="r">
            ss+="<option value=&#39;${r.robotserialno}&#39;>${r.robotnickname}</option>";
        </c:forEach>

        if((parseInt(rr+1)== tempRow)){
            $("#tableid tr:eq("+rr+")")
            .after("
                  <tr id=&#39;tr"+tempRow+"&#39;  >
                  <td  class=&#39;tdcss2&#39;>机器人：</td>
                  <td class=&#39;controls&#39;>
                  <select 
                          id=&#39;sele"+tempRow+"&#39; 
                          name=&#39;teams["+tempRow+"].robot&#39; value=&#39;&#39;  
                          class=&#39;required selecss&#39;   
                          onchange=&#39;queryGroup(this.value,"+tempRow+")&#39;>"+ss+"</select>
                   </td>
                   <td  class=&#39;tdcss&#39;>群名称：</td>
                   <td class=&#39;controls&#39;>
                   <p id=&#39;ttqu"+tempRow+"&#39;>
                   <select 
                            id=&#39;ssess"+tempRow+"&#39; 
                            name=&#39;teams["+tempRow+"].groupname&#39; 
                            value=&#39;&#39; 
                            class=&#39;required selecss&#39;>
                    </select>
                    </p>
                    </td>
                    <td class=&#39;controls&#39;>
                    <a  id=&#39;addtian"+tempRow+"&#39;   onclick=&#39;insertRows("+tempRow+")&#39;>
                    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg"  class="lazy" 
                     alt=&#39;&#39; 
                     src=&#39;${ctxStatic}/images/add.jpg&#39;  
                     style=&#39;height:21px; 
                     width:24px;margin-top: 8px;&#39;>
                     </a> &nbsp&nbsp&nbsp<a id=&#39;delet"+tempRow+"&#39; onclick=&#39;delRows("+tempRow+")&#39;>
                     <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg"  class="lazy" 
                      alt=&#39;&#39; 
                      src=&#39;${ctxStatic}/images/dele.jpg&#39;  
                      style=&#39;height:21px; 
                      width:24px;margin-top: 8px;&#39;>
                      </a>
                      </td>
                      </tr>");
        }else{

            for (i=tempRow-1;i>=shu;i--){
                $("#tr"+i).attr("id","tr"+(i+1)+"");
                 $("#delet"+i+"").attr("onclick","delRows("+(i+1)+")");
                $("#addtian"+i).attr("onclick","insertRows("+(i+1)+")");
                 $("#ttqu"+i).attr("id","ttqu"+(i+1)+"");
                 $("#delet"+i+"").attr("id","delet"+(i+1)+"");
                 $("#addtian"+i).attr("id","addtian"+(i+1)+"");
                $("#sele"+i).attr("name","teams["+(i+1)+"].robot");
                $("#sele"+i).attr("onchange","queryGroup(this.value,"+(i+1)+")");
                $("#ssess"+i).attr("name","teams["+(i+1)+"].groupname");
                $("#sele"+i).attr("id","sele"+(i+1)+"");
                $("#ssess"+i).attr("id","ssess"+(i+1)+"");
            }

            $("#tableid tr:eq("+rr+")")
            .after("<tr id=&#39;tr"+shu+"&#39; >
            <td  class=&#39;tdcss2&#39;>机器人：</td>
            <td class=&#39;controls&#39;>
            <select
             id=&#39;sele"+shu+"&#39;
              name=&#39;teams["+shu+"].robot&#39; 
              value=&#39;&#39;  
              class=&#39;required selecss&#39; onchange=&#39;queryGroup(this.value,"+shu+")&#39;>"+ss+"</select>
              </td>
              <td  class=&#39;tdcss&#39;>群名称：</td>
              <td class=&#39;controls&#39;>
              <p id=&#39;ttqu"+shu+"&#39;>
              <select
               id=&#39;ssess"+shu+"&#39; 
               name=&#39;teams["+shu+"].groupname&#39; 
               value=&#39;&#39;  
               class=&#39;required selecss&#39;>
               </select>
               </p>
               </td>
               <td class=&#39;controls&#39;>
               <a  id=&#39;addtian"+shu+"&#39;   onclick=&#39;insertRows("+shu+")&#39;>
               <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg"  class="lazy" 
                alt=&#39;&#39; 
                src=&#39;${ctxStatic}/images/add.jpg&#39;  
                style=&#39;height:21px;
                width:24px;
                margin-top: 8px;&#39;>
                </a> &nbsp&nbsp&nbsp<a id=&#39;delet"+shu+"&#39; onclick=&#39;delRows("+shu+")&#39;>
                <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg"  class="lazy" 
                 alt=&#39;&#39; 
                 src=&#39;${ctxStatic}/images/dele.jpg&#39;  
                 style=&#39;height:21px; 
                 width:24px;margin-top: 8px;&#39;>
                 </a>
                 </td>
                 </tr>");
        }
    } 
    //删除tr和td并且移动后面的tr和td且下标要一致 
    function delRows(sub){
        var rowNum=sub;  //此处的规律是：行号为下标+1
        var tb1 = $("#tableid");  //找table的ID
        var tempRow = $("#tableid tr").size();//获取表格的行数

        if (tempRow >rowNum){ 
        $("#tr"+sub).remove();  //删除tr
        for (i=(parseInt(sub)+1);i<tempRow;i++){
            $("#tr"+i).attr("id","tr"+(i-1)+"");
            $("#addtian"+i).attr("onclick","insertRows("+(i-1)+")");
            $("#delet"+i+"").attr("onclick","delRows("+(i-1)+")");
            $("#delet"+i+"").attr("id","delet"+(i-1)+"");
             $("#addtian"+i).attr("id","addtian"+(i-1)+"");
            $("#sele"+i).attr("name","teams["+(i-1)+"].robot");
            $("#sele"+i).attr("onchange","queryGroup(this.value,"+(i-1)+")");
            $("#ssess"+i).attr("name","teams["+(i-1)+"].groupname");
            $("#ttqu"+i).attr("id","ttqu"+(i-1)+"");
            $("#sele"+i).attr("id","sele"+(i-1)+"");
            $("#ssess"+i).attr("id","ssess"+(i-1)+"");

             }    
        }

    }

ログイン後にコピー

ロボット:

グループ名:

最初にロボットを選択してください!

JavaScriptにtdタグとtrタグを動的に追加する方法（コード）

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7518

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Javaの完全数 Aug 30, 2024 pm 04:28 PM

Java における完全数のガイド。ここでは、定義、Java で完全数を確認する方法、コード実装の例について説明します。

Java の乱数ジェネレーター Aug 30, 2024 pm 04:27 PM

Java の乱数ジェネレーターのガイド。ここでは、Java の関数について例を挙げて説明し、2 つの異なるジェネレーターについて例を挙げて説明します。

ジャワのウェカ Aug 30, 2024 pm 04:28 PM

Java の Weka へのガイド。ここでは、weka java の概要、使い方、プラットフォームの種類、利点について例を交えて説明します。

Javaのスミス番号 Aug 30, 2024 pm 04:28 PM

Java のスミス番号のガイド。ここでは定義、Java でスミス番号を確認する方法について説明します。コード実装の例。

Java Springのインタビューの質問 Aug 30, 2024 pm 04:29 PM

この記事では、Java Spring の面接で最もよく聞かれる質問とその詳細な回答をまとめました。面接を突破できるように。

Java 8 Stream Foreachから休憩または戻ってきますか？ Feb 07, 2025 pm 12:09 PM

Java 8は、Stream APIを導入し、データ収集を処理する強力で表現力のある方法を提供します。ただし、ストリームを使用する際の一般的な質問は次のとおりです。従来のループにより、早期の中断やリターンが可能になりますが、StreamのForeachメソッドはこの方法を直接サポートしていません。この記事では、理由を説明し、ストリーム処理システムに早期終了を実装するための代替方法を調査します。さらに読み取り：JavaストリームAPIの改善ストリームを理解してください Foreachメソッドは、ストリーム内の各要素で1つの操作を実行する端末操作です。その設計意図はです

Java での日付までのタイムスタンプ Aug 30, 2024 pm 04:28 PM

Java での日付までのタイムスタンプに関するガイド。ここでは、Java でタイムスタンプを日付に変換する方法とその概要について、例とともに説明します。

カプセルの量を見つけるためのJavaプログラム Feb 07, 2025 am 11:37 AM

カプセルは3次元の幾何学的図形で、両端にシリンダーと半球で構成されています。カプセルの体積は、シリンダーの体積と両端に半球の体積を追加することで計算できます。このチュートリアルでは、さまざまな方法を使用して、Javaの特定のカプセルの体積を計算する方法について説明します。カプセルボリュームフォーミュラカプセルボリュームの式は次のとおりです。カプセル体積=円筒形の体積2つの半球体積で、 R：半球の半径。 H：シリンダーの高さ（半球を除く）。例1 入力 RADIUS = 5ユニット高さ= 10単位出力ボリューム= 1570.8立方ユニット説明する式を使用してボリュームを計算します。ボリューム=π×R2×H（4

See all articles

JavaScriptにtdタグとtrタグを動的に追加する方法（コード）

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック