JS：表单输出自动显示在表格里

我现在是这样的
我有三个文本框，我想每个里面浏览者一输入文字，在表的表格里马上就自动显示出来这个文本框输入的内容，有高手指教

举报该问题

推荐答案 2009-05-07

这个很简单，先说一下实现的原理：利用 JavaScript实现表单的实时互动。再简单介绍实现的过程：先给<body>标签的属性onload属性设置一个值，连接到相应的JavaScript函数，JavaScript函数将文本框中的内容通过innerHTML实时传递到对应ID的表格中的<td></td>标签对中，便实现了你所要的效果。

下面就给你写下具体的代码： (复制粘贴到一个TXT文档中，将后缀名改为htm就可以)

<script language="javascript">

function chk()

{

setTimeout("chk()",100);

text1.innerHTML = form1.t1.value;

text2.innerHTML = form1.t2.value;

text3.innerHTML = form1.t3.value;

}

</script>

<body onload="chk()">

<form name="form1">

<textarea name="t1"></textarea><br />

<textarea name="t2"></textarea><br />

<textarea name="t3"></textarea><br />

</form>

<table border="1" width="200" style="border-collapse: collapse" bordercolor="#008000">

<tr height="100px">

<td id="text1"></td>

</tr>

<tr height="100px">

<td id="text2"></td>

</tr>

<tr height="100px">

<td id="text3"></td>

</tr>

</table>

</body>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/v2psp99n.html

第1个回答 2016-02-01

先说一下实现的原理：利用 JavaScript实现表单的实时互动。

再简单介绍实现的过程：先给<body>标签的属性onload属性设置一个值，连接到相应的JavaScript函数，JavaScript函数将文本框中的内容通过innerHTML实时传递到对应ID的表格中的<td></td>标签对中，便实现了所要的效果。

下面就给写下具体的代码： (复制粘贴到一个TXT文档中，将后缀名改为htm就可以)

<script language="javascript">

function chk()

{

setTimeout("chk()",100);

text1.innerHTML = form1.t1.value;

text2.innerHTML = form1.t2.value;

text3.innerHTML = form1.t3.value;

}

</script>

<body onload="chk()">

<form name="form1">

<textarea name="t1"></textarea><br />

<textarea name="t2"></textarea><br />

<textarea name="t3"></textarea><br />

</form>

<table border="1" width="200" style="border-collapse: collapse" bordercolor="#008000">

<tr height="100px">

<td id="text1"></td>

</tr>

<tr height="100px">

<td id="text2"></td>

</tr>

<tr height="100px">

<td id="text3"></td>

</tr>

</table>

</body>

本回答被网友采纳

相似回答

javascript中如何将表单中输入的数据提交到表格中去?答：

JS部分怎么写才能把form表单里的数据输出出来答：document.getElementById("ddd").innerHTML = document.getElementById("xxx").value + document.getElementById("yyy").value;将表单数据获取好后进行拼接赋给某个dom节点显示出来。js获取表单数据命令是：document.getElementById("xxx").value;输出表单数据到某个dom元素内是使用：document.getElement...

jsp页面中表单部分内容实时显示答：这个表单在一个form标签中，点击确定按钮后(实际上就是submit按钮)，提交这个表单，将jsp页面中的内容传递个servlet/jsp（具体取决于你的业务逻辑在哪里实现）。第二个问题：每次载入该界面的时候都执行一个查询数据库操作，将查询的值填写到下面的表中。这样，当你打算新增一个数据后，处理完逻辑的代码...

js表单提交后,如何获取表单中的数据并显示出来答：表单是用form来填写，在提交前可以获取表单里面的数据。我这里用jquery实现。 inputText checkBox1 checkBox2

JS如何显示和隐藏一个表格中的所有表单输入框。答：<!DOCTYPE HTML>last.htmltable{border: 1px solid green;border-collapse: collapse;}td,th {border: 1px solid green;text-align: center;}th {background-color: green;color: white;}var updateToSubmit = function (btn){if (btn.value == '提交') { return true; }var tbody ...

如何用js脚本实现根据表单输入框的数据自动提取数据库中的其他数据回填...答：只能给你给步骤：1.资产编号文本框的onblur()鼠标焦点离开时，发送ajax请求到后台的php页面 2.后台php操作数据库，将结果返回到前台，用js解析返回结果，并将数据显示到相应的文本框中

大家正在搜

表格自动显示日期怎么让表格全部显示出来 excel 自动生成表格 wps表格日期自动排序 wps表格日期怎么自动生成 excel如何自动显示日期多个excel表格自动汇总表格序号怎么自动生成表格表单

JS部分怎么写才能把form表单里的数据输出出来

js表单提交后，如何获取表单中的数据并显示出来

Js 计算表单输入的数据并显示出来？

用JS控制表单的输出值

在javascript中如何实现单击按钮将文本框中输入的内容...

JS如何显示和隐藏一个表格中的所有表单输入框。

JS如何显示和隐藏一个表格中的所有表单输入框。

如何用JS控制表格的一列显示和隐藏