Question

我正在尝试将HTML元素移动到表中的特定位置。例如，我有一个标记为“ abcd”的禁用按钮和一个单元格值为“ xyz”的表。我想通过引用该值将单元格顶部的按钮“ abcd”移动到值“ xyz”。

到目前为止，我为javascript函数编写的代码如下：

<script type="text/javascript">
    function moveObject() {
        var label = prompt("Please enter object to move", "");
        var location = prompt("Please enter cell location", "");
        var element = document.getElementById(label);
    }
</script>

如何引用单元格的值，以便告诉对象移动到那里？

Answer 1

要获得预期结果，请使用以下选项，并使用var ans = db.table.Select(i => new Data() { stringDate = Microsoft.VisualBasic.Strings.Right("0"+SqlFunctions.DatePart("d", i.databaseData), 2) + "/" + Microsoft.VisualBasic.Strings.Right("0"+SqlFunctions.DatePart("m", i.databaseData), 2) + "/" + Microsoft.VisualBasic.Strings.Right("000"+SqlFunctions.DatePart("year", i.databaseData), 2), }).ToList();和var ans2 = db.table.Select(i => new Data() { stringDate = (SqlFunctions.DatePart("d", i.databaseData).ToString().Length == 1 ? "0"+SqlFunctions.DatePart("d", i.databaseData) : SqlFunctions.DatePart("d", i.databaseData).ToString()) + "/" + (SqlFunctions.DatePart("m", i.databaseData).ToString().Length == 1 ? "0"+SqlFunctions.DatePart("d", i.databaseData) : SqlFunctions.DatePart("d", i.databaseData).ToString()) + "/" + ("000"+SqlFunctions.DatePart("year", i.databaseData)).Substring(SqlFunctions.DatePart("year", i.databaseData).ToString().Length-1), }).ToList();将按钮添加到单元格值中

使用document.getElementsByTagName
使用for
使用文本xyz查找单元格并在按钮前面添加禁用的按钮-abcd

prepend

document.getElementsByTagName('TD')

function moveObject() {
        let tds = document.getElementsByTagName('TD')
    let btn = document.getElementById('abcd')
        for(let cell of tds){
      if(cell.innerHTML ==='xyz'){
        cell.prepend(btn)
      }
    }
        }

Answer 2

假设您的html表具有以下结构：

 <table id="myTable">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
    <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

如您所见，每个单元格都是一个<td>元素。

由于我们的表具有唯一的ID-myTable-我们可以通过调用以下命令获取所有TD元素：

var cells=document.getElementById("myTable").getElementsByTagName("td");

变量单元格包含 myTable 的所有TD元素的html集合，但我们真正感兴趣的是单元格的实际内容-因此我们需要遍历此数组，并使用 .firstChild.data 引用每个单元格的内容。如果将其与字符串进行比较，我们可以看到匹配的单元格。

这是一个例子：

function getCell(myString) {
  var cells = document.getElementById("myTable").getElementsByTagName("td");
  for (var a = 0; a < cells.length; a++) {
    if (cells[a].firstChild.data == myString) {
      return cells[a];
    }
  }
  return null;
}
console.log(getCell("Cell C"));

<table id="myTable">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

Answer 3

prompt()是一个糟糕的界面。改为这样做：

将所有内容包装在块级元素中（div，section，main等），我们将其称为“父”
通过事件内属性将父项注册到click事件：
```
parent.onclick = callback
```
或通过事件监听器：
```
parent.addEventListener('click', callback) 
```
现在，父级将检测到父级中任何内容的所有点击。
使用event.target确定单击了什么。无需id，class或tagName即可标识event.target，但可以使用.matches()来缩小if / else控件中的event.target范围。

function addButton(event) {
  const clicked = event.target;
  const buttons = this.querySelectorAll('button');
  const prompt = this.querySelector('legend');

  if (clicked.matches('button')) {
    if (clicked.matches('.selected')) {
      clicked.classList.remove('selected');
      prompt.textContent = 'Click a Button';
      prompt.style.color = 'black';
    } else {
      for (let button of buttons) {
        button.classList.remove('selected');
      }
      clicked.classList.add('selected');
      prompt.textContent = 'Click a Cell';
      prompt.style.color = 'red';
    }
  } else if (clicked.matches('td')) {
    let button = this.querySelector('.selected');
    if (button) {
      clicked.appendChild(button);
    } else {
      return false;
    }
  } else {
    return false;
  }
}

document.querySelector('main').onclick = addButton;

table {
  table-layout: fixed;
  border-spacing: 3px;
  width: 100%;
}

th,
td {
  width: 33%;
  border: 1px solid #000;
  padding: 1px
}

th::before,
td::before {
  content: '\a0';
}

legend {
  font-size: 1.75rem
}

button {
  display: inline-block;
  margin: 0 5px;
  line-height: 100%;
}

.selected {
  color: red;
  outline: 2px solid red;
}

<main>
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
    </tbody>
  </table>

  <fieldset>
    <legend>Click a Button</legend>
    <button>X</button>
    <button>X</button>
    <button>X</button>
    <button>X</button>
  </fieldset>
</main>

尝试将html元素移动到表中的特定位置

3 个答案: