table单元格新增行并编辑_小程序table表格如何在td加一行-优快云博客

本文链接：https://blog.youkuaiyun.com/ajlgl/article/details/65444546

本文介绍了一种使用HTML、CSS和JavaScript实现表格单元格动态新增行并支持编辑的方法。通过Bootstrap美化界面，并借助jQuery简化DOM操作。文章详细展示了如何在用户交互下添加新的表格行及删除现有行，同时实现了单元格的双击编辑功能。

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

table单元格新增行并编辑

需要

bootstrap.min.css —— [ Bootstrap ]

jquery-1.8.2.min.js —— [ Jquery ]

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建HTML</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript"> 
function save_para_table(){  
    var tableinfo = gettableinfo();  
    alert(tableinfo);  
}  
//get table infomation  
function gettableinfo(){  
    var key = "";  
    var value = "";  
    var tabledata = "";  
    var table = $("#para_table");  
    var tbody = table.children();  
    var trs = tbody.children();  
    for(var i=1;i<trs.length;i++){  
        var tds = trs.eq(i).children();  
        for(var j=0;j<tds.length;j++){  
            if(j==0){  
                if(tds.eq(j).text()==null||tds.eq(j).text()==""){  
                    return null;  
                }  
                key = "key\":\""+tds.eq(j).text();  
            }  
            if(j==1){  
                if(tds.eq(j).text()==null||tds.eq(j).text()==""){  
                    return null;  
                }  
                value = "value\":\""+tds.eq(j).text();  
            }  
        }  
        if(i==trs.length-1){  
            tabledata += "{\""+key+"\",\""+value+"\"}";  
        }else{  
            tabledata += "{\""+key+"\",\""+value+"\"},";  
        }  
    }  
    tabledata = "["+tabledata+"]";  
    return tabledata;  
}  

function tdclick(tdobject){  
    var td=$(tdobject);  
    td.attr("onclick", "");  
    //1,取出当前td中的文本内容保存起来  
    var text=td.text();  
    //2,清空td里面的内容  
    td.html(""); //也可以用td.empty();  
    //3，建立一个文本框，也就是input的元素节点  
    var input=$("<input>");  
    //4，设置文本框的值是保存起来的文本内容  
    input.attr("value",text);  
    input.bind("blur",function(){  
        var inputnode=$(this);  
        var inputtext=inputnode.val();  
        var tdNode=inputnode.parent();  
        tdNode.html(inputtext);  
        tdNode.click(tdclick);  
        td.attr("onclick", "tdclick(this)");  
    });  
    input.keyup(function(event){  
        var myEvent =event||window.event;  
        var kcode=myEvent.keyCode;  
        if(kcode==13){  
            var inputnode=$(this);  
            var inputtext=inputnode.val();  
            var tdNode=inputnode.parent();  
            tdNode.html(inputtext);  
            tdNode.click(tdclick);  
        }  
    });  

    //5，将文本框加入到td中  
    td.append(input);  
    var t =input.val();  
    input.val("").focus().val(t);  
//              input.focus();  

    //6,清除点击事件  
    td.unbind("click");  
}
var row=0;  
function addtr(){ 
    if(row<8){
    row++;
    var table = $("#para_table");  
    var tr= $("<tr>" +  
        "<td style='text-align: center;'  onclick='tdclick(this)'>"+"</td>" +  
        "<td style='text-align: center;'  onclick='tdclick(this)'>"+"</td>" +  
        "<td  align='center' onclick='deletetr(this)'><button type='button'  class='btn btn-xs btn-link' >"+"删除"+"</button></td></tr>");  
    table.append(tr);  
    }else{
        alert("已达到发票能开具的最大商品明细行数");
    }
}  
function deletetr(tdobject){
    row--;
    var td=$(tdobject);  
    td.parents("tr").remove();  
} 


</script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="table table-bordered" id="para_table">
  <thead>
    <tr>
      <th style="text-align:center" width="200">名称</th>
      <th style="text-align:center" width="200">值</th>
      <th style="text-align:center" width="100">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td  style="text-align:center; " onclick="tdclick(this)"></td>
      <td  style="text-align:center; " onclick="tdclick(this)"></td>
      <td  style="text-align:center; " onclick="deletetr(this)"><button type="button"  class="btn btn-xs btn-link">删除</button></td>
    </tr>
  </tbody>
</table>

<div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">
  <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>
</div>
</body>
</html>

这里写图片描述