开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将动态创建的元素tr发送到一个函数，并在其中获取td中输入的值

在前端开发中，可以通过动态创建元素tr并将其发送到一个函数中，然后在函数中获取td中输入的值。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>动态创建元素示例</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td><input type="text" id="input1"></td>
            <td><input type="text" id="input2"></td>
            <td><button onclick="sendRow()">发送</button></td>
        </tr>
    </table>

    <script>
        function sendRow() {
            var table = document.getElementById("myTable");
            var newRow = document.createElement("tr");
            var input1 = document.getElementById("input1").value;
            var input2 = document.getElementById("input2").value;

            var newCell1 = document.createElement("td");
            newCell1.innerHTML = input1;
            newRow.appendChild(newCell1);

            var newCell2 = document.createElement("td");
            newCell2.innerHTML = input2;
            newRow.appendChild(newCell2);

            table.appendChild(newRow);
        }
    </script>
</body>
</html>

在上述代码中，我们通过document.createElement方法动态创建了一个tr元素，并获取了两个输入框input1和input2中的值。然后，我们创建了两个新的td元素，并将输入框的值赋给它们的innerHTML属性。最后，将新创建的td元素添加到tr元素中，并将tr元素添加到表格中。

这样，当点击"发送"按钮时，会触发sendRow函数，动态创建一个包含输入框值的新行，并将其添加到表格中。

这个功能在表单提交、数据展示等场景中非常常见。

相关搜索:将TD值复制到TD内动态创建的输入 jQuery - 在表中的<tr>元素上单击事件并获取<td>元素值如何从javascript函数中获取动态输入字段的值？从onChange输入元素中的函数调用中获取索引值将.png img添加到index.ejs中动态创建的表中的td元素通过动态创建的输入id将值推送到数组中从表的每个第一个<td>中获取<tr>的值以使其递增的JQuery和HTML.无法从动态数据列表中获取所选元素的值(仅获取最后一个元素)将值输入到多个表中，其中一个表的索引将向辅助表中创建一个条目在类中创建一个空的动态数组，并在访问时给出值？在动态创建输入元素时，将局部变量的值传递给dragstart处理程序在JS中编写一个基于输入数组创建动态输出的函数如何应用一个函数从不同的数据帧中获取数据，并在其中包含条件？创建一个将2个列表中的对应元素配对的函数如何在发送到API之前使用输入字段中的值从UI动态创建json对象在计算中使用输入字段的值，并在另一个元素中显示结果将函数输入的默认值设置为Python中的另一个输入在React中动态创建多级下拉列表，并在下拉列表中获取所选子菜单的值 XSLT将函数应用于元素值并在xml文档的新副本中输出结果如何从动态HTML表中获取特定的用户输入数据(Onchange函数、数字值)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AJAX 前端开发利器：实现网页动态更新的核心技术

以下是一个展示如何使用AJAX从XML文件中获取信息的示例：示例说明当用户点击上面的 "获取 CD 信息" 按钮时，将执行 loadDoc() 函数。...但是，如果输入字段不为空，则执行以下操作：创建一个 XMLHttpRequest 对象创建在服务器响应就绪时要执行的函数将请求发送到服务器上的 PHP 文件（gethint.php）注意，添加了...> 在上述示例中，当用户在输入字段中输入字符时，通过AJAX与服务器通信，并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。...但是，如果输入字段不为空，则执行以下操作：创建一个 XMLHttpRequest 对象创建在服务器响应就绪时要执行的函数将请求发送到服务器上的 ASP 文件（gethint.asp）注意，添加了...在HTML表格中显示XML数据此示例循环遍历每个元素，并在HTML表格中显示和元素的值： table, th

1340 0

如何使用 AngularJS 构建功能丰富的表格？

如果尚未安装，请根据AngularJS官方文档的指引执行安装步骤。创建基本的表格在 AngularJS 中，我们可以使用 ng-repeat 指令迭代一个数组，以动态生成表格的行。...>在上述代码中，我们首先创建一个元素，并在其中定义表头行 tr>。...然后，使用 ng-repeat 指令迭代名为 items 的数组，生成表格的数据行。通过双花括号插值语法 {{ }}，我们可以在表格中显示数据。动态生成表头对于表格来说，表头是非常重要的一部分。...}}td> tr>在上述代码中，我们通过将一个输入框的 ng-model 绑定到 searchText 变量，以实现表格数据的过滤。...我们首先创建一个包含表格和分页的外层容器，并使用 ng-controller 指令指定控制器。

2912 0

七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理

使用Form标签生成请求时，所有有关输入的控件值会随着请求一起发送。输入的值是怎样发送到服务器端的？...当请求类型是Get，Put或Delete时，值会通过查询语句发送，当请求是Post类型，值会通过Post数据传送。使用输入控件名的作用是什么？所有输入控件的值将随着请求一起发送。...同一时间可能会接收到多个值，为了区分发送到所有值为每个值附加一个Key，这个Key在这里就是名称属性。名称和 Id的作用是否相同？...测试保存和取消功能关于实验11 在实验11中为什么将保存和取消按钮设置为同名？在日常使用中，点击提交按钮之后，请求会被发送到服务器端，所有输入控件的值都将被发送。提交按钮也是输入按钮的一种。...隐藏 Form 元素在View中创建一个隐藏form元素 1: <form action="/Employee/CancelSave" id="CancelForm" method="get

5.3K10 0

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

2）操作Element对象：修改属性值：要明确获取的对象是哪一个，再查看API，找其中有哪些属性可以设置；修改标签体内容：通过属性innerHTML修改元素属性的className属性来设置class的属性值，应用较多； 5、动态表格案例实战 1）添加表格的实现思路： * 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置...td的文本为文本框的内容 * 4、创建tr，将td添加到tr中 * 5、获取table，将tr添加到table中 2）删除表格的实现思路： * 1、确定点击的是哪一个超链接 * 2、再删除 <.../*添加 * 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置td的文本为文本框的内容 * 4、创建tr，将td...添加到tr中 * 5、获取table，将tr添加到table中 * 删除： * 1、确定点击的是哪一个超链接 * 2、再删除

2.2K4 0

JS的常用操作

：document.write(“”); 3.步骤分析第一步：确定事件(onsubmit)并为其绑定一个函数第二步：书写这个函数(获取用户输入的数据获取数据时需要在指定位置定义一个 id>) 第三步...) 第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block) 第五步：清除显示图片的定时操作() 第六步：书写隐藏图片的定时操作第七步：书写定时器中的函数(获取广告图片的位置并设置属性...分析：事件(onclick) 获取ul元素节点创建一个城市的文本节点创建一个li元素节点将文本节点添加到li元素节点中去。...(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。...第四步：遍历二维数组中的省份第五步：将遍历的省份与用户选择的省份比较第六步：如果相同，遍历该省份下所有的城市第七步：创建城市文本节点第八步：创建option元素节点第九步：将城市文本节点添加到

8.1K1 0

3-DOM

DOM(Document Object Model) 文档对象模型 ---- 概念将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作 W3C...getElementByClassName 根据Class属性值获取元素对象数组并返回 getElementByName() 根据name属性值获取元素对象数组并返回创建其他DOM对象 createAttribute...Node节点对象节点对象代表文档树中的一个节点。节点可以是元素节点、属性节点、文本节点，或者也可以是任何一种节点。...//获取表格对象 //插入按钮操作 insert_btn.onclick=function(){ //获取输入框中的值...//获取表格对象 //插入按钮操作 insert_btn.onclick=function(){ //获取输入框中的值

1.3K2 0

WEB入门之十四 jQuery事件

属性说明 type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键，值1表示鼠标左键；值2表示鼠标中键...这说明对于动态创建的元素，bind是无能为力的。但是如果把示例5.17中的bind换成live，这个问题就解决了。...把bind换成live后，表格中的任何一行在单击时都可以改变背景色，包括动态创建的行。...：表示事件类型，多个事件用空格隔开 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号...我们使用on函数给按钮绑定了单击事件，并在该事件中通过传参的形式把文本框的值传给处理函数。

1291 0

脚本语言知识总结.

2.Ajax快速入门 ①：开发步骤 1).创建XMLHttpRequest对象 2).将状态触发器绑定到一个函数 3).使用open方法建立与服务器的连接 4).向服务器端发送数据 5).在回调函数中对返回数据进行处理...2： ² 将class属性值为itcast的元素下所有a元素字体变为红色 ² 将class属性值为itcast的元素下直接a元素字体变为蓝色 ² 将div元素后所有兄弟a元素，字体变为黄色，大小变为30px...> tr> slideDown(speed, [callback]) 概述通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。...在动画完成时执行的函数 fadeOut(speed, [callback]) 概述通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。...() 获取父元素 next([expr]) 获取下一个兄弟元素 prev([expr]) 获取前一个兄弟元素 siblings([expr]) 获取所有兄弟元素在XML 解析中 find 方法使用最多

5K13 0

WEB入门之十四 jQuery事件

属性说明 type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键，值1表示鼠标左键；值2表示鼠标中键；值...，依次循环 5.4 jQuery事件绑定 jQuery提供了诸多函数来处理复杂的事件，例如动态绑定事件，或者一个元素同时绑定多个事件处理函数，或者多个元素同时共用一个事件处理函数等。...这说明对于动态创建的元素，bind是无能为力的。但是如果把示例5.17中的bind换成live，这个问题就解决了。...，多个事件用空格隔开 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号，然后单击按钮时分析出用户的出生日期...我们使用on函数给按钮绑定了单击事件，并在该事件中通过传参的形式把文本框的值传给处理函数。

811 0

JavaScript基本入门教程

/方法属性/方法说明 length 设置或者返回数组中的元素数目 join() 把数组中的所有元素放入到字符串中，按照指定的字符串分隔 pop() 删除最后一个元素并返回 push() 向数组的末尾添加一个或者更多个元素...访问数组元素时不会产生数组越界，访问未赋值的数组元素的时候，该元素的值为undefined 2）全局函数 A.eval()函数：计算JavaScript字符串，并把它当做脚本代码来执行。...，其中最后一个字符串参数是函数的执行体。...其中命名变量既可以是基本数据类型，也可以是复合数据类型，对象中命名变量称为属性，而对象中的函数称为方法，对象访问属性和方法可以通过链式编程"."来实现。...2.获取元素对象的四种方法在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象： getElementById(); ---通过元素ID获取对应元素对象，可以通过ID获取对应的元素对象

4.1K2 0

DOM 又是个什么鬼?

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。...返回值是一个数组 getElementsByTagName() 根据元素名称获取元素对象们。返回值是一个数组 getElementsByClassName() 根据 Class 属性值获取元素对象们。...1.3.1 常用方法方法描述 appendChild() 向元素添加新的子节点，作为最后一个子节点 removeChild() 从元素中移除子节点 replaceChild() 替换元素中的子节点...() 把指定属性设置或更改为指定值 removeAttribute() 元素中移除指定属性 innerHTML 设置或返回元素的内容注意 innerHTML 获取/设置标签体内容【该标签会刷新父标签内所有内容...1.4.1 常用方法方法描述 name 返回属性的名称 value 设置或返回属性的值 1.5 事件 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

1.3K3 0

再来利用java学学javaweb——–html+css+ JavaScript

基础选择器 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} 2....方法 join(参数):将数组中的元素按照指定的分隔符拼接为字符串 push() 向数组的末尾添加一个或更多元素，并返回新的长度。...修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： * 属性：innerHTML 1. 获取元素对象 2....返回值是一个数组 4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 2....属性 * Element：元素对象 1. 获取/创建：通过document来获取和创建 2.

2.3K2 0

【译】开始学习React - 概览和演示教程

这种特殊的方法是测试索引与数组中的所有索引，并返回除传递的索引之外的所有索引。现在，我们必须将该函数传递给组件，并在每个可以调用该函数的字符旁边绘制一个按钮。...我们将创建一个类组件，并在其中使用一个constructor()，到目前为止，我们还没做过。我们需要constructor()来使用它，并接收父项的props。...首先，我们将使该函数在每次对输入进行更改时都将运行。event将传递，我们将设置Form的状态为输入name（键）和value（值）。...在渲染中，让我们从state中获取两个属性，并将它们分配为正确的表单键对应的值。我们将把handleChange()作为输入的onChange运行，最后导出Form组件。...作为一个小测试，我们可以创建一个新的Api.js文件，并在其中创建新的App。我们可以测试的公共API是Wikipedia API，我这里有一个URL断点,可以进行随机*搜索。

11.2K2 0

关于后端代码的总结_辐射4最强防具代码

(节点) 创建新的 HTML 元素要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。...text); //获取一个页面已经存在的元素 var div=document.getElementById("div1"); //添加新创建的元素p到已经存在的元素div中 div.appendChild...td>¥125td> tr> 动态表格表格的属性和方法描述 table.rows 获取表格中的所有行 tr.cells 获取表格中某一行的所有单元格...tr.rowIndex 获取表格中某一行的下标索引(从0开始) td.cellIndex 获取单元格的下标索引 table.insertRow() 在表格中创建新行，并将行添加到rows集合中 table.deleteRow...() 从表格即rows集合中删除指定行 tr.insertCell()) 在表格的行中创建新的单元格，并将单元格添加到cells集合中遍历表格中的内容，动态添加行、删除行 <!

3.2K2 0

与Ajax同样重要的jQuery（1）

next 获取紧随pre元素的后一个兄弟元素 $("label + input") prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input") 练习2： ² 将...class属性值为itcast的元素下所有a元素字体变为红色 ² 将class属性值为itcast的元素下直接a元素字体变为蓝色 ² 将div元素后所有兄弟a元素，字体变为黄色，大小变为30px <scripttype...input:not(:checked)") :even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") ----- 选取奇数元素 :odd 选取所有元素中奇数索引的元素，从0...slideDown(speed, [callback]) 概述通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。...在动画完成时执行的函数 fadeOut(speed, [callback]) 概述通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

10K6 0

JavaScript之Dom、事件，案例

将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作具体方法代码实现的分析为添加按钮绑定单击事件。创建 tr 元素。创建 4 个 td 元素。将 td 添加到 tr 中。获取文本框输入的信息。创建 3 个文本元素。...将文本元素添加到对应的 td 中。创建 a 元素。将 a 元素添加到对应的 td 中。将 tr 添加到 table 中。 5.3、添加功能的实现 td中 deleteTd.appendChild(a); //10.获取table元素，将tr添加到table中 let table = document.getElementById...定义删除的方法。获取 table 元素。获取 tr 元素。通过 table 删除 tr。

1.2K2 0

JQuery 入门学习(二)

p元素) p:nth-child(2) {} 选择tr元素下的第二个td元素 $("tr td:eq(1)") tr>td>td>td>td>tr> tr... 可以看到，鼠标移动后就能输出当前鼠标所在的坐标。其中function有一个参数e，每个事件函数都有一个参数，这个参数就是指该事件本身。...获取其中内容赋值给txt append() $("div#main").append('leavesongs.com'); 向id=main的div元素中追加内容'leavesongs.com...attr("width","500"); 将所有table元素的属性设置为宽度等于500px val() var pass = $(":password").val(); 获得密码框中的值(val()方法一般作为获取...再结合之后我要说的ajax，就可以动态地向服务器请求内容，并在不刷新页面的情况下更新页面中一部分。

1.3K1 0

Javaweb08-Ajax项目-分页条件查询 + 增删改

="upwd" id="upwd" placeholder="请输入用户密码"> td> tr> tr> td colspan="2" align="center...(){ }）；给动态加载的元素绑定事件；获取动漫id通过Ajax请求删除数据，并通过当前元素的父元素，删除该元素；（因为异步删除的数据，没有再查询一次，所以需要，手动删除动漫数据）; //点击删除，删除对应的动漫...id，于是就取巧的，将参数放在导航栏rul中，然后获取url,使用字符操作，获取到携带在rul中的参数(动漫id); // 从url中获取参数函数，使用正则表达式 function getUrlParam...的值，并调用分页条件查询函数 showPageAnimeList(); 改变form表单中pageNo的值方法：通过id选择input标签再赋值：$("#pageNo").val(1); 直接修改表单指定...；这一类修改下面的可选值时，需要将值设置到表单中；将值放到表单中两种方式：(跟页面跳转一样) 1、通过id选择input元素geivalue属性赋值：$("#pageSize").

4.7K4 0

JSP学习笔记

用于向当前的页面中动态包含其他的文件，这个文件可以是动态文件也可以是静态文件。...Web程序都自动创建一个application对象，只要不关闭服务器，application对象将一直存在，所有访问同一工程的用户可以共享application对象。...在设置值时，自动实现类型转换（将字符串自动转换为JavaBean中属性所声明的类型）。...4.将所有的属性与请求参数关联功能：将提交页面中表单输入域所提供的输入值提交到JavaBean对象中相同名称的属性中...实例题目：设计Web程序，计算任意两个整数的和值，并在网页上显示结果。

8671 0

WEB入门二表格和表单

本章将学习如何在页面中创建一个表格以及表格的基本操作，例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后，通过举例讲解表格与表单的综合应用。...如果值为get，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的处理程序，以进行处理。...如果将值指定为post，表单上的数据会作为一个数据块发送到处理程序，而不使用请求字符串。...单选按钮将元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮必须具有相同的名称，用户一次只能选择一个选项。...普通按钮由用户通过客户端脚本语言自定义动作；提交按钮用于将当前所在表单中的信息提交给指定服务器程序；重置按钮将当前所在表单中的元素值设置为创建表单时的初始值；图形按钮的功能类似于提交按钮，可用于替代提交按钮

941 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭