js は値を 1 行ずつ動的に追加、削除、走査します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js は値を 1 行ずつ動的に追加、削除、走査します

小云云

Jan 27, 2018 am 09:36 AM

javascript消去トラバース

テーブルに 1 行ずつ js を追加することについて、今日は時間をかけて整理しました。新しい HTML ファイルを作成します (エディターがない場合は、demo.txt ファイルを作成して、サフィックスを変更できます)を、demo.html) にコピーし、そこに次のコードをすべて貼り付けます。

関数には、テーブルへの行の追加、テーブルからの行の削除、テーブルを走査して値を取得するなどが含まれます。

クリック手順: [追加] ボタンをクリックしてテーブルに行を追加します。行を追加するには、[削除] ボタンを使用して現在の行を削除できます。他の行は影響を受けません。削除または追加すると、各行の番号が自動的に変更されます。パッケージと価格は、内容は

<textarea></textarea>, 保存ボタンをクリックすると、テーブル内のすべての行を走査して取り出します。ポップアップボックス内のすべての行のデータポップアップ表示は、必要に応じて後で処理するためにバックグラウンドに渡すことができます。

レンダリング:

ソースコード:

<!--
  Creator： WangPeng
  CreateTime : 2018-01-25
  去年今日此门中，人面桃花相映红。
  人面不知何处去，桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态增加表格</title>
</head>
<style>
  td /*设置表格文字左右和上下居中对齐*/
  {
    vertical-align: middle;
    text-align: center;
    padding: 9px;
  }
  textarea{
    min-height: 60px;
    min-width: 200px;
  }
</style>
<script type="text/javascript">
  function del(obj){
    if(document.getElementById(&#39;tbodyid&#39;).children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById(&#39;tbodyid&#39;).removeChild(objtr);
    var tbody=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbody.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbody.children[i].children[0].innerHTML=i+1;
    }
    }
    else{
      alert("请不要全部删除");
    }
  }
  function add(){
  var trid = new Date().getTime();
  var packageid=trid+&#39;packageid&#39;;
  var countid=trid+&#39;countid&#39;;
  var priceid=trid+&#39;priceid&#39;;
  var objtr=document.createElement(&#39;tr&#39;);
  objtr.id=trid;
  objtr.innerHTML="<td></td> " +
    "      <td><input id=&#39;"+trid+"packageid&#39;></td> " +
    "      <td><textarea id=&#39;"+trid+"countid&#39;></textarea></td> " +
    "      <td><input id=&#39;"+trid+"priceid&#39;></td> " +
    "      <td><button type=&#39;button&#39; onclick=&#39;del(this)&#39;>删除</button></td>";
    document.getElementById("tbodyid").appendChild(objtr);
    var tbodyobj=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbodyobj.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbodyobj.children[i].children[0].innerHTML=i+1;
    }
  }
  function save(){
    var tbodyobj=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbodyobj.childElementCount;
    var trid="";
    var packageid="";
    var countid="";
    var priceid="";
    var list=new Array();
    for (var i=0;i<countchildren;i++){
      trid=tbodyobj.children[i].id;
      packageid=trid+"packageid";
      countid=trid+"countid";
      priceid=trid+"priceid";
      var map={
      "套餐":document.getElementById(packageid).value,
      "内容":document.getElementById(countid).value,
      "价格":document.getElementById(priceid).value
      }
      list.push(map);
    }
    console.log("list:",list);
    alert(JSON.stringify(list));
  }
</script>
<body>
<p>
  <p style="width: 80%;margin: 10%">
  <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
    <caption>动态增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序号</th>
      <th width="20%">套餐</th>
      <th width="30%">内容</th>
      <th width="10%">价格</th>
      <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbodyid">
    <tr id="123">
      <td>1</td>
      <td><input id="123packageid"></td>
      <td><textarea id="123countid"></textarea></td>
      <td><input id="123priceid"></td>
      <td><button type="button" onclick=&#39;del(this)&#39;>删除</button></td>
    </tr>
    </tbody>
  </table>
    <button type="button" onclick=&#39;add()&#39;>添加</button>
    <button type="button" onclick=&#39;save()&#39;>保存</button>
</p>
</p>
</body>
</html>

js動的生成についても同様で、必要に応じて指定された場所に必要な要素を作成できます。

関連する推奨事項:

Formフォーム要素を動的に追加するJavaScriptメソッドの例

jQueryで実装されたフォーム関数の簡単な動的追加と削除の例

インスタンスの詳細な説明 jQueryで新規を動的に追加する簡単な実装要素をリストに追加します

以上がjs は値を 1 行ずつ動的に追加、削除、走査しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

ホットAIツール

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、