javascript 存取table中内容

最新推荐文章于 2022-07-15 13:51:47 发布

原创最新推荐文章于 2022-07-15 13:51:47 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #javascript #button #delete #border #server

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行表格数据操作的方法，包括如何添加、删除及读取表格中的数据。通过具体的示例代码展示了如何实现这些功能，并提供了一个交互式的演示案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html> 
<head runat="server" > 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>表格相关</title> 
<script language="javascript"> 
function add_row(){ 
if ((document.getElementById("name").value=="")||(document.getElementById("pass").value=="")) 
{alert("值不能为空"); return 0;} 
var tableobj=document.getElementById("table_1"); 
var rowobj=tableobj.insertRow(tableobj.rows.length); 
var cell1=rowobj.insertCell(rowobj.cells.length); 
var cell2=rowobj.insertCell(rowobj.cells.length); 
var cell3=rowobj.insertCell(rowobj.cells.length); 
var cell4=rowobj.insertCell(rowobj.cells.length); 
 var type = document.getElementsByName("pass")[0];
 var head = type.options[type.selectedIndex].text;
 var passval=document.getElementById("pass").value;
cell1.innerHTML=document.getElementById("name").value; 
cell2.innerHTML=head; 
cell3.innerHTML=passval;
cell4.innerHTML="<input type='button' value='删除' onclick='delete_row("+(tableobj.rows.length-1)+");leo()'>"; 
document.getElementById("name").value=""; 
document.getElementById("pass").value=""; 
} 
function leo(){//当删除一行后，对各行重新建立索引！！！
var tableobj=document.getElementById("table_1"); 
for(i=2;i<tableobj.rows.length;i++) 
{ 
tableobj.rows[i].cells[2].innerHTML="<input type='button' value='删除' onclick='delete_row("+i+");leo()'>"; 
} 
} 
function delete_row(i){ 
var tableobj=document.getElementById("table_1"); 
alert("删除第"+i+"行"); 
tableobj.deleteRow(i); 
} 
function read_row()
{
debugger;
var tableobj=document.getElementById("table_1"); 
var str="";
var cellstr="";
    for(i=2;i<tableobj.rows.length;i++) 
    {
        for (j=0;j<tableobj.rows[0].cells.length-1;j++)
            {
                if (str=="")
                {
                  str=tableobj.rows[i].cells[j].innerHTML;
                }
                else
                {
                  strstr= str+','+tableobj.rows[i].cells[j].innerHTML;
                }
             }
             if (cellstr=="")
             {
                 cellstr=str;
             }
             else
             {
                 cellstrcellstr= cellstr+';'+str;
             }
             str="";
    }
    alert(cellstr);
}
</script> 
</head> 
<body> 
<div align="center"> 
    <input id="Button1" type="button" value="button" onclick ="read_row();" />
</div> 
<div align="center"> 
<table id="table_1" border="1"> 
<tr> 
<td>帐号</td><td>地区</td><td>地区编码</td> <td>操作</td> 
</tr>
<tr>
<td style="height: 27px"><input name="name" type="text"> </td>
<td style="height: 27px">                    <select id="pass">
                        <option selected="selected" value="1">杭州市</option>
                        <option value="2">上城区</option>
                        <option value="3">下城区</option>
                        <option value="4">江干区</option>
                        <option value="5">拱墅区</option>
                        <option value="6">西湖区</option>
                        <option value="7">萧山区</option>
                        <option value="8">余杭区</option>
                        <option value="9">桐庐县</option>
                        <option value="10">淳安县</option>
                        <option value="11">建德市</option>
                        <option value="12">富阳市</option>
                        <option value="13">临安市</option>
                        <option value="14">滨江区</option>
                        <option value="15">下沙区</option>
                    </select> </td>
 <td style="height: 27px">   
 </td>
<td style="height: 27px"><input name="add" type="button" onclick ="add_row()" value="添加"/> </td> 
</tr> 
</table> 
</div> 
</body> 
</html> 