js实现对table的增加行和删除行的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
//添加方法
function addtr()
{
    //var trid=0;
    var tab=document.getElementByIdx_x("signFrame");
    //添加行
    var newTR = tab.insertRow(tab.rows.length);
 alert(tab.rows.length);
    //trid++;
   
    //获取序号=行索引
    var  xuhao=newTR.rowIndex.toString();
 alert(xuhao);
    newTR.id = "tr" + xuhao;
    //添加列:序号
    var newNameTD=newTR.insertCell(0);
    //添加列内容
    newNameTD.innerHTML = xuhao;
    //添加列:日期
    var newNameTD=newTR.insertCell(1);
    //添加列内容
    newNameTD.innerHTML = "<input name=‘time" + xuhao + "‘ id=‘time" + xuhao + " size=‘19‘ onmouseover=‘this.style.backgroundColor=#6298E1;this.style.color=#000000;‘ onmouseout=‘this.style.backgroundColor=#6298E1;this.style.color=#000000;‘ />";

//添加列:方式
    var newEmailTD=newTR.insertCell(2);
    //添加列内容
    newEmailTD.innerHTML = "<select style=‘width:70px;‘ name=‘way" + xuhao + "‘ id=‘way" + xuhao + "‘><option  value=‘电话‘>电话</option><option value=‘QQ‘>QQ</option>   </select>";

//添加列:备注
    var newTelTD=newTR.insertCell(3);
    //添加列内容
    newTelTD.innerHTML = "<input size=‘60‘ name=‘remark" + xuhao + "‘ id=‘remark" + xuhao + "‘ type=‘text‘  onclick=‘showid(this)‘ />";
       
    //添加列:删除按钮
    var newDeleteTD=newTR.insertCell(4);
    //添加列内容
    newDeleteTD.innerHTML = "<div align=‘center‘ style=‘width:40px‘><a href=‘javascript:;‘ onclick=\"deltr(‘tr" + xuhao + "‘)\">删除</a></div>";
       
}
</script>

<script type="text/javascript">
//删除其中一行
function deltr(trid)
{    //alert(trid);
    var tab=document.getElementByIdx_x("signFrame");
    var row=document.getElementByIdx_x(trid);   
    var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始  
    tab.deleteRow(index);  //从table中删除

//重新排列序号,如果没有序号,这一步省略
    var nextid;
    for(i=index;i<tab.rows.length;i++){
        tab.rows[i].cells[0].innerHTML = i.toString();
        nextid=i+1;
        remark=document.getElementByIdx_x("remark"+nextid);
        remark.id="remark";
    }
}

</script>

<script type="text/javascript">
    function showid(txt)
    {alert(txt.id);
        }

</script>
<body>
<input type="button" value="保存" onclick="addtr()" />

<table border="1px" width="70%" id="signFrame">
    <tr id="trHeader">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="trHeader">
        <td width="50px">序号</td>
        <td width="170px">时间</td>
        <td width="100px">方式</td>
        <td>备注</td>
        <td width="80px">操作</td>
    </tr>
    <tr id="trHeader">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="trHeader">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="trHeader">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="trHeader">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
</table>

</body>
</html>

时间: 2024-11-06 22:33:54

js实现对table的增加行和删除行的操作的相关文章

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤: 1.创建XMLHttp对象 2.发送请求:包括打开链接.发送请求 3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 var xmlHttp = xmlHttpCreate();//创建对象 xmlHttp.onreadysta

JQuery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8

js实现对json数据的序列化(兼容ie6以上浏览器)

/** * 增加对JSON数据的序列化方法, * 主要用于IE6.7不支持JSON对象的浏览器 */ var xue = xue || {};xue.json = xue.json || {}; xue.json.stringify = function(obj) {    //如果是IE8+ 浏览器(ff,chrome,safari都支持JSON对象),使用JSON.stringify()来序列化    if (window.JSON) {        return JSON.stringi

[asp.net] 通过JS实现对treeview控件的复选框单选控制。

前端JS代码: //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target } else { elem = evt.srcElement } return elem } var lastC = null; function OnClientTreeNodeChecked(ev

Jquery动态增加行和删除行

$("#add_5").click(function(){ var str_1="<tr> <td><input type=\"text\" placeholder=\"商品名称\" class=\"reg_input mput\"> </td>" + " <td> <label class=\"radio\"&

Node.js实现对mysql数据库的crud时报加密方式错误解决方案

本人在学习全栈开发过程中做一个Node的web项目在连接本地MySQL8.0版本的数据库时,发现Navicat连接不上,它报了一个数据库的加密方式导致连接不上的错误,错误如下: MySQL8.0版本的加密方式和MySQL5.0的不一样,连接会报错. 解决方法如下: 打开mysql的命令行进入解压的mysql根目录下. 输入密码登录到mysql: 更改加密方式 ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIR

Xamarin.Android 入门实例(4)之实现对 SQLLite 进行添加/修改/删除/查询操作

1.Main.axml 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="fill_parent"

可以增加和删除行的table(可以编辑表格中内容)

页面文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="jquery-1.6.min.js"></script> <s

JS如何实现对name是数组的复选框的全选和反选以及取消选择

JS如何实现对name是数组的复选框的全选和反选以及取消选择? form内容如下: 因为PHP接收要用 数组形式的 复选框,正常情况下 JQ可如果是这种 直接使用 $("input[name=ptpt])即可.但是这种php接收的只是最后一个值,字符串.<label><input type='checkbox' name='ptpt' value='a1' />a1</label><label><input type='checkbox' n