实时编辑表格数据!DOM

<html>
<!-- Created on: 2004-11-17 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="shinnok">
  <meta name="generator" content="AceHTML 6 Pro">
</head>
<body οnclick="edit();">
<table width="500px">
<tr>
<td width="200px">asdfas1</td><td>asdfsdf1</td>
</tr>
<tr>
<td>asdfas2</td><td>asdfsdf2</td>
</tr>
<tr>
<td>asdfas3</td>
<td>asdfsdf3</td>
</tr>
</table>
<script type="text/javascript">
<!--
function edit()
{
    var obj = "";
 var txt = "";
    if(event.srcElement.tagName == "TD")
 {
     event.cancelBubble=true;
  obj = event.srcElement;
  txt = obj.innerHTML;
  var myInput = document.createElement("input");
  myInput.type="text";
  myInput.value=txt;
  myInput.onblur = myInputOnBlur;
  myInput.style.width = (obj.offsetWidth-5);
  myInput.style.height = (obj.offsetHeight-2);
  obj.innerHTML = "";
  obj.appendChild(myInput);
  myInput.focus();
  //alert();
 }
}
function myInputOnBlur()
{
    this.parentNode.innerHTML = this.value;
}
//-->
</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vben是一款基于Vue.js框架开发的前端组件库,提供了丰富的可视化组件和工具,方便开发人员快速构建数据可视化的网页应用。在vben中,大数据量可编辑表格可能会出现卡顿的情况。 首先,大数据量意味着表格中包含的数据量非常庞大,可能达到成千上万条记录。在渲染这么大量的数据时,就需要消耗较多的计算和内存资源。如果浏览器或设备的性能不够强大,就可能导致表格在进行数据更新和渲染时出现卡顿的现象。 其次,可编辑表格需要实时监听用户的操作,并及时更新表格中的数据。这个过程也需要进行数据的计算和更新,当数据量较大时,这个过程就会变得更加耗时,从而导致表格的卡顿。 为了解决这个问题,可以采取以下的优化措施: 1. 数据分页加载:将大数据量分为多个页面进行加载,每次只加载当前页面所需的数据,这样可以降低渲染负担和提高数据更新的速度。 2. 虚拟滚动:只渲染当前可见的部分数据,随着用户滚动表格,再动态加载其他数据。这样可以减少DOM元素的数量,优化性能。 3. 合理使用缓存:合理使用缓存机制,尽可能减少重复的计算和请求,提高数据的读取和更新效率。 4. 优化算法和数据结构:通过优化算法和数据结构,减少不必要的计算和数据操作,提高整体的性能。 总之,处理大数据量可编辑表格卡顿的问题需要综合考虑各种因素,包括数据量、设备性能、算法优化等。通过合理的优化措施,可以提升表格的更新和渲染效率,降低卡顿的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值