没有JQuery的情况下如何使用HTML5和JavaScript创建可编辑的数据网格 [英] Without JQuery how to create editable datagrid using HTML5 and JavaScript
本文介绍了没有JQuery的情况下如何使用HTML5和JavaScript创建可编辑的数据网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不使用JQuery如何使用HTML5和JavaScript创建可编辑的数据网格vaScript
Without JQuery how to create editable datagrid using HTML5 and JavaScriptvaScript
推荐答案
不使用JQuery 与 HTML5和JavaScript >
jQuery只是一个压缩的JavaScript库，它使开发人员的生活变得轻松而简单.
如果您准备好使用JavaScript，那么您应该准备使用jQuery，它只会使您受益.我相信我早些时候已经与您共享了这样的控件.
Without JQuery Vs HTML5 and JavaScript
jQuery is nothing but a compressed JavaScript library that makes developers life easy and simple.
If you are ready for JavaScript then you should be ready for jQuery, it will benefit you only. I believe I already shared one such control with you earlier.
这对您有用吗?尽管该技术一直足以满足我的需求，但无法使用公式.无法用它找到任何旧项目，所以我不得不重新编写，希望它是正确的.
Does this work for you? There''s no ability to use formulas, though the technique has always been adequate for my needs. Cant find any old projects with it so I had to re-write, hope it''s correct.
<!DOCTYPE html>
<html>
<script>
function byId(e){return document.getElementById(e);}
function makeTable(strParentId)
{
var table, tbody, curX, curY, curRow, curCell
table = document.createElement('table');
tbody = document.createElement('tbody');
var sideLen = 20;
table.appendChild(tbody);
for (curY=0; curY<sideLen; curY++)
{
curRow = document.createElement('tr');
for (curX=0; curX<sideLen; curX++)
{
curCell = document.createElement('td');
curCell.appendChild( document.createTextNode( (curY*sideLen)+curX+1 ) );
curCell.onclick = function() {onCellClick(this);}
curRow.appendChild(curCell);
}
tbody.appendChild(curRow);
}
byId(strParentId).appendChild(table);
}
function onCellClick(clickedCell)
{
var cellTxt = clickedCell.innerHTML;
var editBox = document.createElement('input');
editBox.value = cellTxt;
clickedCell.removeChild(clickedCell.childNodes[0]);
clickedCell.appendChild(editBox);
clickedCell.onclick = '';
editBox.focus();
editBox.onblur = function(){onLoseFocus(this);}
}
function onLoseFocus(editedCell)
{
var cellTxt = editedCell.value;
parentNode = editedCell.parentNode;
parentNode.removeChild(editedCell);
parentNode.appendChild( document.createTextNode(cellTxt) );
parentNode.onclick = function() {onCellClick(this);}
}
</script>
<style>
td{
width: 32px;
text-align: right;
height: 20px;
}
td input
{
height:16px;
text-align:center;
border: none;
width: 100%;
}
</style>
<head>
</head>
<body onload="makeTable('tblHolder');">
<div id="tblHolder"></div>
</body>
</html>
这篇关于没有JQuery的情况下如何使用HTML5和JavaScript创建可编辑的数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
