Home Web Front-end JS Tutorial Table enables double-clicking to edit, add, and delete rows

Table enables double-clicking to edit, add, and delete rows

Jan 30, 2018 pm 01:17 PM
table Add to edit

This article mainly introduces the functions of bootstrap table to double-click to edit, add, and delete rows. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

html:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<table class="table table-bordered" id="para_table">

 <tr>

  <th style="text-align:center" width="200">名称</th>

  <th style="text-align:center" width="200">值</th>

  <th style="text-align:center" width="100">操作</th>

 </tr>

 <tr>

  <td style="text-align:center; " onclick="tdclick(this)"></td>

  <td style="text-align:center; " onclick="tdclick(this)"></td>

  <td style="text-align:center; " onclick="deletetr(this)">

  <button type="button" class="btn btn-xs btn-link">删除</button>

  </td>

 </tr>

</table>

  

<p id="addtrp" style="margin-top:-15px; width: 15%; float: right;">

 <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>

</p>

Copy after login

js:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

function save_para_table(){

  

 var tableinfo = gettableinfo();

 alert(tableinfo);

  

  

}

//get table infomation

function gettableinfo(){

 var key = "";

 var value = "";

 var tabledata = "";

 var table = $("#para_table");

 var tbody = table.children();

 var trs = tbody.children();

 for(var i=1;i<trs.length;i++){

  var tds = trs.eq(i).children();

  for(var j=0;j<tds.length;j++){

   if(j==0){

    if(tds.eq(j).text()==null||tds.eq(j).text()==""){

     return null;

    }

    key = "key\":\""+tds.eq(j).text();

   }

   if(j==1){

    if(tds.eq(j).text()==null||tds.eq(j).text()==""){

     return null;

    }

    value = "value\":\""+tds.eq(j).text();

   }

  }

  if(i==trs.length-1){

   tabledata += "{\""+key+"\",\""+value+"\"}";

  }else{

   tabledata += "{\""+key+"\",\""+value+"\"},";

  }

 }

 tabledata = "["+tabledata+"]";

 return tabledata;

}

  

function tdclick(tdobject){

 var td=$(tdobject);

 td.attr("onclick", "");

 //1,取出当前td中的文本内容保存起来

 var text=td.text();

 //2,清空td里面的内容

 td.html(""); //也可以用td.empty();

 //3,建立一个文本框,也就是input的元素节点

 var input=$("<input>");

 //4,设置文本框的值是保存起来的文本内容

 input.attr("value",text);

 input.bind("blur",function(){

  var inputnode=$(this);

  var inputtext=inputnode.val();

  var tdNode=inputnode.parent();

  tdNode.html(inputtext);

  tdNode.click(tdclick);

  td.attr("onclick", "tdclick(this)");

 });

 input.keyup(function(event){

  var myEvent =event||window.event;

  var kcode=myEvent.keyCode;

  if(kcode==13){

   var inputnode=$(this);

   var inputtext=inputnode.val();

   var tdNode=inputnode.parent();

   tdNode.html(inputtext);

   tdNode.click(tdclick);

  }

 });

  

 //5,将文本框加入到td中

 td.append(input);

 var t =input.val();

 input.val("").focus().val(t);

//    input.focus();

  

 //6,清除点击事件

 td.unbind("click");

}

function addtr(){

 var table = $("#para_table");

 var tr= $("<tr>" +

  "<td onclick=&#39;tdclick(this)&#39;>"+"</td>" +

  "<td onclick=&#39;tdclick(this)&#39;>"+"</td>" +

  "<td align=&#39;center&#39; onclick=&#39;deletetr(this)&#39;><button type=&#39;button&#39; class=&#39;btn btn-xs btn-link&#39; >"+"删除"+"</button></td></tr>");

 table.append(tr);

}

function deletetr(tdobject){

 var td=$(tdobject);

 td.parents("tr").remove();

}

Copy after login

Related recommendations:

How to implement the jQuery double-click editing table function

The event attribute ondblclick that is triggered when the mouse double-clicks an element in html

Use jQuery to realize the double-click editing table function

The above is the detailed content of Table enables double-clicking to edit, add, and delete rows. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
Tutorial on adding a new hard drive in win11 Tutorial on adding a new hard drive in win11 Jan 05, 2024 am 09:39 AM

When buying a computer, we may not necessarily choose a large hard drive. At this time, if we want to add a new hard drive to win11, we can first install the new hard drive we purchased, and then add partitions to the computer. Tutorial on adding a new hard drive in win11: 1. First, we disassemble the host and find the slot of the hard drive. 2. After finding it, we first connect the "data cable", which usually has a fool-proof design. If it cannot be inserted, just reverse the direction. 3. Then insert the new hard drive into the hard drive slot. 4. After inserting, connect the other end of the data cable to the computer's motherboard. 5. After the installation is completed, you can put it back into the host and turn it on. 6. After booting, we right-click "This Computer" and open "Computer Management" 7. After opening, click "Disk Management" in the lower left corner 8. Then on the right you can

How to add a TV to Mijia How to add a TV to Mijia Mar 25, 2024 pm 05:00 PM

Many users are increasingly favoring the electronic ecosystem of Xiaomi smart home interconnection in modern life. After connecting to the Mijia APP, you can easily control the connected devices with your mobile phone. However, many users still don’t know how to add Mijia to their homes. app, then this tutorial guide will bring you the specific connection methods and steps, hoping to help everyone in need. 1. After downloading Mijia APP, create or log in to Xiaomi account. 2. Adding method: After the new device is powered on, bring the phone close to the device and turn on the Xiaomi TV. Under normal circumstances, a connection prompt will pop up. Select &quot;OK&quot; to enter the device connection process. If no prompt pops up, you can also add the device manually. The method is: after entering the smart home APP, click the 1st button on the lower left

How to edit documents in Tencent Docs? -Tencent Document Editing Document Tutorial Guide How to edit documents in Tencent Docs? -Tencent Document Editing Document Tutorial Guide Mar 19, 2024 am 08:19 AM

Does anyone know how to edit documents in Tencent Docs? It doesn't matter if you don't know. Today, the editor will introduce detailed graphic explanations on how to edit documents in Tencent Docs. I hope it can help you. Detailed graphic explanation of editing documents in Tencent Documents 1. First, enter Tencent Documents directly (if you don’t have it, download it now!) and log in directly (QQ and TIM two login methods are supported) 2. After logging in, click Add in the upper right corner No., directly create online documents, online forms, new folders, etc.! 3. Then enter the information according to your needs!

Tutorial to quickly create desktop shortcuts in Win11 Tutorial to quickly create desktop shortcuts in Win11 Dec 27, 2023 pm 04:29 PM

In win11, we can quickly start software or files on the desktop by adding desktop shortcuts, and we only need to right-click the required files to operate. Add a desktop shortcut in win11: 1. Open "This PC" and find the file or software you want to add a desktop shortcut to. 2. After finding it, right-click to select it and click "Show more options" 3. Then select "Send to" - "Desktop Shortcut" 4. After the operation is completed, you can find the shortcut on the desktop.

How to restore the deleted hosts file How to restore the deleted hosts file Feb 22, 2024 pm 10:48 PM

Title: How to restore the hosts file after deletion Summary: The hosts file is a very important file in the operating system and is used to map domain names to IP addresses. If you accidentally delete the hosts file, you may be unable to access certain websites or have other network problems. This article will introduce how to recover accidentally deleted hosts file in Windows and Mac operating systems. Text: 1. Restore hosts file in Windows operating system. Hosts file in Windows operating system

How to connect to Polygon network in MetaMask wallet? Tutorial guide for connecting MetaMask wallet to Polygon network How to connect to Polygon network in MetaMask wallet? Tutorial guide for connecting MetaMask wallet to Polygon network Jan 19, 2024 pm 04:36 PM

How to add a PolygonMainnet network To use MATIC (Polygon) with Metamask, you need to add a private network called "PolygonMainnet". Transferring in with the wrong network address can cause problems, so be sure to use the "PolygonMainnet" network before transferring out of $MATIC. The Metamask wallet is connected to the Ethereum mainnet by default, but we can simply add "PolygonMainnet" and use $MATIC. Just a few simple copy and paste steps and you're done. First, in the Metamask wallet, click on the network option in the upper right corner and select "C

How to edit home screen pages on iPhone How to edit home screen pages on iPhone Feb 14, 2024 pm 02:00 PM

Apple allows you to quickly change your home screen by rearranging your home screen pages at any time and deleting them freely. This way, you can easily hide multiple apps and widgets without dragging and deleting them one by one. In this article, we will explain how to edit pages on your iPhone home screen. CONTENTS[SHOW] Shows how to edit Home screen pages on iPhone You can edit the Home screen to rearrange pages, hide/unhide certain pages in the Home screen, and delete pages completely. To start editing your iPhone home screen, press and hold an empty area on your home screen. When your home screen enters jitter mode, tap the row of dots at the bottom of the screen. You should now see all your home screens displayed in a grid format. Option 1: On the home screen

How to add watermark to images in Vue? How to add watermark to images in Vue? Aug 19, 2023 pm 12:37 PM

How to add watermark to images in Vue? Vue is a popular JavaScript framework that is widely used for building web applications. Sometimes we need to add watermarks to images in Vue applications to protect the copyright of the image or increase the recognizability of the image. In this article, I will introduce you to a method of adding watermarks to images in Vue and provide corresponding code examples. The first step is to introduce a third-party library for adding watermarks to Vue. It is recommended to use watermarkj

See all articles