初学js---获取输入框中的内容并添加到表格中

按下添加按钮将输入框中的内容添加到表格中:

这里涉及到的动态创建表格单元的已讲略过

只讲获取数据添加到表格:通过getElementById(*).value分别获取输入框中的值,通过以上代码将其加入到表格中

完整代码:(注释部分为更复杂的方法)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值填入表格</title>
<style>
div{
border:solid #eee 1px;
width:300px;

}
.box1{
margin:auto auto;
}
.box2{
margin:auto auto;
height:300px;
margin-top:100px;
}
table{
border-collapse: collapse; /*当有两条边框线时,只显示一条边框线*/
border:solid 1px;
padding:10px;
}
tbody{
border:solid 1px;
}
tr,th,td{
border:solid 1px;
padding:10px;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<table>

<thead>
<tr style="background: lightgray;height: 35px;">
<th>姓名</th>
<th>学号</th>
<th>qq号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td >data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >删除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >删除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >删除</a></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td><a href="#" >删除</a></th>
</tr>
</tbody>
</table>

</div>
<div id="box2" class="box2">
<div>
name:
<input type="text" id="name">
</div>
<div>
number:
<input type="text" id="number">
</div>
<div>
qq_number:
<input type="text" id="qq">
</div>
<input type="button" value="添加" id="add">

</div>
<script type="text/javascript">

var add=document.getElementById(‘add‘);
add.onclick=function(){
//1.取输入框内的值
var name=document.getElementById(‘name‘).value;
var number=document.getElementById(‘number‘).value;
var qq=document.getElementById(‘qq‘).value;
var tr=document.createElement(‘tr‘);
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+number+"</td>"+
"<td>"+qq+"</td>"+
"<td><a href=‘javaScript:void(0);‘>删除</a></td>";

var a=tr.getElementsByTagName("a")[0];
a.href=‘javaScript:void(0)‘;
a.onclick=function(){
var r=confirm(‘是否确认删除‘);
if(r){
//删除
//获取点击
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}

}
// var tr=document.createElement(‘tr‘);
// var nameTd=document.createElement(‘td‘);
// var numberTd=document.createElement(‘td‘);
// var qqTd=document.createElement(‘td‘);
// var aTd=document.createElement(‘td‘);
// var a=document.createElement("a");
// a.href=‘javaScript:void(0)‘;
// a.innerText="删除";

//3.创建文本节点
// var nameText=document.createTextNode(name);
// var numberText=document.createTextNode(number);
// var qqText=document.createTextNode(qq);
//var aText=document.createTextNode("删除");

//将文本放到相应的td里面
// nameTd.appendChild(nameText);
// numberTd.appendChild(numberText);
// qqTd.appendChild(qqText);

//aTd.appendChild(a);

//把td加入到tr中
// tr.appendChild(nameTd);
// tr.appendChild(numberTd);
// tr.appendChild(qqTd);
// tr.appendChild(aTd);

var tbody=document.getElementById(‘tbody‘);
tbody.appendChild(tr);

}

var tbody=document.getElementById(‘tbody‘);
var links=document.getElementsByTagName(‘a‘);

links.href=‘javaScript:void(0)‘;
var len=links.length;
for(var i=0;i<len;i++){
var link=links[i];

link.onclick=function (){
//提示用户是否删除
var r=confirm(‘是否确认删除‘);
if(r){
//删除
//获取点击
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}
}
}

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/ayayi-666/p/9392455.html

时间: 2024-10-10 16:38:14

初学js---获取输入框中的内容并添加到表格中的相关文章

js 获取标签内的内容

js 获取标签内的内容 参考:这篇博客给了我很大的启发. http://www.cnblogs.com/breakdown/archive/2012/10/09/2716221.html 我遇到的问题:获取span标签中的值51,各种折腾:正则,截取,替换,最后参考上文使用替换解决了.特感谢博主. <a href=""><span id="span4028807e4ebe04ee014ebea76a6d0001alarm" style="

将文本框内容添加到表格中的行代码实例

将文本框内容添加到表格中的行代码实例:在实际操作中,往往需要将文本框中的内容添加到表格的行中或者类似的情况,下面就通过一个实例介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

将一个文件中的内容,在另一个文件中生成. for line in f1, \n f2.write(line)

将一个文件中的内容,在另一个文件中生成. 核心语句: for line in f1: f1中的所有一行 f2.write(line)                                  # 是直接写入f1中出来的每一行,用   .write() 原文地址:https://www.cnblogs.com/jack20181017/p/9863521.html

js获取input文本框内容问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><td><input type="text" name="username" placeholder="请输入用户名&

把一个数组内容动态添加到下拉列表中

<body> //html部分先写一个列表select <select name="" id="sel"></select> //js部分 <script> //数组内容 var data = ["北京","上海","广州"]; //获取select var sel = document.getElementById('sel'); //因为一会要用str来拼

如何从word中复制内容到网站后台编辑器中

word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转存方案. <b>复制word图文混排内容到UEditor,图片不能正常显示,会将图片转换成一个带链接的占位图,如图 并且图片地址也是本地的路径,如果直接发布内容后,其它的用户将看不到图片(也就是不能正常访问图片,因为图片的路径不正确) 解决办法: 拷贝图片链接->点击上传图片->选择网

前端用js获取本地文件的内容

这里要写成input的形式 调用upload函数 传递的参数就表示所选的文件<input type="file" onchange="upload(this)" /> //前端读取本地文件的内容 下面代码中的this.result即为获取到的内容 function upload(input) { //支持chrome IE10 if (window.FileReader) { var file = input.files[0]; filename = f

JQ和Js获取span标签的内容

html: 1 <span id="content">'我是span标签的内容'</span> javascript获取: 1 var content = document.getElementById("content").innerText; 2 var content = document.getElementById("content").innerHTML; jquery获取: 1 var cont=$(&quo

js获取/设置任意元素中间内容的兼容方法

一.设置元素中间内容兼容代码 设置任意元素的中间文本内容兼容代码 /** * 设置任意元素的中间文本内容 * @param {*} element 标签元素 * @param {*} text 文本内容 */ function setInnerText(element,text){ if(typeof element.textContent === "undefined"){ element.innerText = text; }else{ element.textContent =