获取动态行数据值以使用 JavaScript 预填充表单

get dynamic rows data values to prefill the forms using javascript

本文关键字：JavaScript 填充 表单 动态 数据 获取      更新时间：2023-09-26

>我有一个表，其中的行是动态的，值来自数据库。

例如，我的表格如下：- 

name|email
xyz|xyz@gmail.com 
pqr|pqr@gmail.com

我将名称保留为链接，单击该链接时会在下面打开一个表单，其字段与表格相同，即

名字：----电子邮件：----

所以现在我想要的是打开表单，我也希望表单应该预先填充表中的值..

例如：- 如果用户点击 pqr，那么应该打开一个包含值的表单。

name : pqr
email : pqr@gmail.com
我

做了一个javascript函数，我在其中传递用户点击的用户名的用户ID。在我的功能中，我做了以下工作： 

    var id=userid;
    var row = document.getElementById(id);
    var inputs = row.getElementsByTagName("td");
    document.getElementById("fname").value = inputs[0].innerHTML;
    document.getElementById("email").value = inputs[1].innerHTML;

正如我正在使用的那样 

inputs[0].innerHTML;

它打印的名称如下所示：

<font size="4"><a href="#" id="viewUser" onclick="populate('73');">xyz</a></font>

但我只想在我的文本框中出现"xyz"..为此，当我这样做时：

inputs[0].value;
它

给了我它未定义的价值......为什么会这样？

请有人指导如何用行的值填充表单。

我在这里做一些假设。有关工作代码，请参阅此小提琴：http://jsfiddle.net/G6Q5X/

下面是一个基本表。

<table id="list">
    <tr>
        <td><a href="#">Name 1</a></td>
        <td>Email 1</td>
    </tr>
    <tr>
        <td><a href="#">Name 2</a></td>
        <td>Email 2</td>
    </tr>
</table>

首先，您要按 ID 获取表并获取它包含的行：

//nodeList of all rows in the table
var table = document.getElementById('list').children[0].children;

然后向每个链接添加一个事件侦听器：

for(var i=0, len=table.length; i<len; i++){
    var link = table[i].children[0].children[0]; 
    link.addEventListener('click', getInfo);
}

事件侦听器的回调将调用一个函数，我使用了一个我称为"getInfo"的函数：

var getInfo = function(){
    var name = this.innerHTML;
    var email = this.parentNode.parentNode.children[1].innerHTML;
    alert('Your name is: ' + name + ' and email is: ' + email)
}

我希望这有所帮助。

相关文章：