如何使用javascript创建动态网格

how to create dynamic grid using javascript

本文关键字：动态 网格 创建 javascript 何使用      更新时间：2023-09-26

s.no.|描述

  1. abcd1
  2. abcd2
  3. abcd3

我想通过输入添加更多的行。现在我想要的是何时添加另一行。比方说{description="abcd4"}

那么上面的网格将变成

s.no.|描述

  1. abcd4
  2. abcd1
  3. abcd2
  4. abcd3

意味着s.no.字段已更新，并将在顶部添加新行。在顶部添加新行是没有问题的，但我如何更新s.no。同时，我想问一下有没有具体的方法可以做到这一点。

这里有一个在表顶部添加行并保持数字更新的解决方案：

document.querySelector('#btnadd').addEventListener('click', function () {
  var inp = document.querySelector('#inpadd');
  var descr = inp.value;
  if (descr === '') return; // do not add empty values
  var grid = document.querySelector('#grid');
  // first increment all row numbers
  for (var i = 1, row; row = grid.rows[i]; i++) {
    row.cells[0].textContent = i+1;
  }
  // add new row
  var row = grid.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.textContent = 1;
  cell2.textContent = descr;
  // clear input
  inp.value = "";
});
New description: <input type="text" id="inpadd"><button id="btnadd">Add</button>
<table id="grid">
  <tr><th>s.no.</th><th>description</th></tr>
<table>

如果您想在排序列表的开头插入新的文本描述，可以使用'insertBefore'javascript代码：

list.insertBefore(entry, list.firstChild);

它应该在列表的开头添加新的文本。如果有助于解决您的问题，请参阅以下代码。

<!DOCTYPE html>
<html>
<body>
<p>Input the text description and click 'Add Description' button to insert in list:</p>
<form>
Description Text:<br>
<input type="text" name="description" id="description">
<br>
<input type="button" value="Add Description" onclick='appendDescription()'>
</form>
<ol id="desclist">
<li>abcd1</li>
<li>abcd2</li>
<li>abcd3</li>
</ol>
<script>
function appendDescription(){
var description= document.getElementById('description').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(description));
var list = document.getElementById('desclist');
list.insertBefore(entry, list.firstChild);
}
</script>
</body>
</html>

function pushAtStarting(array, element){
    array.unshift(element); // new element has s.no = 0
    for (index in array){
       array[index].sno++
    }
}
var array = [];
pushAtStarting(array, {sno: 0, description: "abc"});

如果您的网格是java脚本数组，元素是json元素，那么它就可以工作。

相关文章：