js动态添加表格

Posted 2023-04-16

参考技术A <script type="text/javascript">
var $ = function(id)
return document.getElementById(id);


//全选
function checkAll(target)
var checkeds = document.getElementsByName("b_id");
for (var i = 0; i < checkeds.length; i++)
checkeds[i].checked = target.checked;



//刷新行号
function refreshRowNo()
var tbody = $("tbody");
for (var i = 0; i < tbody.rows.length; i++)
tbody.rows[i].cells[0].innerhtml = i + 1;



//添加行
function AddRow()
var tbody = $("tbody");
var row = tbody.insertRow(tbody.rows.length);
row.insertCell(row.cells.length);
row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />';
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />';

refreshRowNo();


//删除行
function DelRow()
var checkeds = document.getElementsByName("b_id");
var ischeck = false;
for (var i = checkeds.length - 1; i >= 0; i--)
if (checkeds[i].checked)
ischeck = true;
break;


if (ischeck)
if (confirm("确定删除选中行?"))
for (var i = checkeds.length - 1; i >= 0; i--)
if (checkeds[i].checked)
var index = checkeds[i].parentNode.parentNode.rowIndex;
$("tbody").deleteRow(index - 1);


refreshRowNo();

else
alert("请选中需要删除的行!");



//保存
function Save()
var detail = [],
tbody = $("tbody");
for (var i = 0; i < tbody.rows.length; i++)
var name = tbody.rows[i].cells[2].childNodes[0].value;
var number = tbody.rows[i].cells[3].childNodes[0].value;
var price = tbody.rows[i].cells[4].childNodes[0].value;
var sum = tbody.rows[i].cells[5].childNodes[0].value;
var item = name + "^" + number + "^" + price + "^" + sum;
detail.push(item);

var detailstr = detail.join("|");
$("detail").value = detailstr;
$("myform").submit();


</script>

<form name="myform" action="AddOrder.aspx" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>
<li>
供应商名称：<input type="text" id="GYSMC" name="GYSMC" />
<input type="button" onclick="AddRow()" value="增加一行" />
<input type="button" onclick="DelRow()" value="删除" />
<input type="button" onclick="Save()" value="保存" />
</li>
</ul>
<table cellpadding="1" cellspacing="2">
<tr>
<th style="width:60px">序号</th>
<th style="width:20px"><input type="checkbox" onclick="checkAll(this)" /></th>
<th style="width:120px">名称</th>
<th style="width:120px">数量</th>
<th style="width:120px">单价</th>
<th style="width:120px">总金额</th>
</tr>
<tbody id="tbody">
<tr>
<td>1</td>
<td><input type="checkbox" name="b_id" /></td>
<td><input type="text" name="name" /></td>
<td><input type="text" name="number" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="sum" /></td>
</tr>
</tbody>
</table>
</form> 参考技术B function addline()

var i=addrow.rows.length//获得表格长度
var unamej = "uname'+i+'" ;
var typej = "type'+i+'" ;
newline=document.all.addrow.insertRow();
newline.insertCell().innerHTML='<td><input name="unamej" readonly="true" size="11"></td>';
newline.insertCell().innerHTML='<td><input name="typej"readonly="true" size="11" /></td>';

本回答被提问者采纳

JS做动态表格

　　在后台将数据发送过来后，你需要将这些数据做成表格，实现一般表格管理功能

 

 

 例如这种数据格式，

 

首先要创建table

 

 在table中添加thead  在thead中添加tr

 

 循环数组，且创建开头的input勾选框，在每个tr信息前添加一个勾选框

 

在table中添加tbody

 

 

 可以看到，在tbody中的遍历了data数据中的值，且在每个人值得末尾追加两个按钮，分别是删除和修改

检测全选框

 

 点击添加的思路是；

1.点击时弹出添加容器

2.点击容器中的确认时，先建立一个空对象，再获取添加容器中的input值（value）,分别附上用户输入其中的值

　　

 

3.追加在总数据末尾

data.push(empty)

4.重新渲染添加页面

 

 

 我的删除是将所有的共功能按钮放在一起，然后通过取余来判断两种按钮，

 

 

当为奇数则是修改

 

 删除事件

 

 查询功能的思路是，获取到tbody下所有的tr中的姓名栏，因为我写的是姓名查询，

将姓名栏追加到一个空数组中后，循环当前数组，查到后，创建一个接受正确值得数组；

循环当前姓名值得那一行，然后追加到当前数组中取去，然后情况table中的内容，将单独这一行tr重新渲染