使用表格数据填写表格

本文介绍了使用表格数据填写表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我有一个表单，通过它向数据库添加条目，我试图使用相同的表单来更新/编辑数据库中的现有记录。

我的页面由添加数据的表单和显示现有数据的表格组成。 对于每个条目，现有数据表都有一个 edit 列，表格使用php动态填充。

这就是我我试图去，当用户点击任何行的编辑按钮时，该行中的数据应该自动填充到表单。

我做了一个jsfiddle here

我试过的JS脚本：

$ b $

$（＃tableID）。on（click，.edit_button，function（）{）var data = $（this）.closest（td）。siblings（）。map（function（）{ return $（this）.text（）; }）。toArray（） ; console.log（data）; }）; //事件无法识别。无法点击。

我在这里找到了很多技巧，但其中大部分都不响应click事件或他们返回null /空值，这是因为表单是动态填充的？

我对web开发很新，任何帮助将不胜感激。注意： 数据库包含20多条记录（动态添加），在Jsfiddle中我只显示了1，保持代码清洁。抱歉缺少css样式：P

解决方案

$（ （）.edit_button，function（）{ var data = $（this）.closest（td）。siblings（）。map（function（）{返回$（this）.text（）; ））。toArray（）; console.log（data）; }）;

像这样使用可能会有帮助 < pre $ $（＃tableID）。click（function（）{ var data = $（this）.closest（td）。siblings（）。map function（）{ return $（this）.text（）; }）。toArray（）; console.log（data）; }） ;

So I have a form through which I add entries to my database, I am trying to use the same form to update/edit existing records in the database.

My page consists of a form to add data and a table which shows existing data. the existing data table has a column edit against each entry, the table is filled dynamically using php.

This is what I am trying to to, when the user clicks on edit button against any row, the data in that row should be filled up into the form automatically.

I made a jsfiddle here

The JS script I have tried:

$("#tableID").on("click", ".edit_button", function() { var data = $(this).closest("td").siblings().map(function() { return $(this).text(); }).toArray(); console.log(data); }); // the event is not recognized. no action on clicking.

There a quite a few techniques I found here stackoverflow, but most of them donot respond to click event or they return null/empty values, Is that because the form is filled dynamically?

I am pretty new to web development, Any help would be appreciated. Thanks!

Note: the database contains more than 20+ records (dynamically added), In Jsfiddle I have shown only 1, to keep the code clean. sorry for the lack of css styling :P

解决方案

$("#tableID").on("click", ".edit_button", function() { var data = $(this).closest("td").siblings().map(function() { return $(this).text(); }).toArray(); console.log(data); });

Use like this may be it is helpful

$("#tableID").click( function() { var data = $(this).closest("td").siblings().map(function() { return $(this).text(); }).toArray(); console.log(data); });