我们如何使用javascript根据表格中的第一行元素动态添加行？

Posted 2023-03-05

【中文标题】我们如何使用javascript根据表格中的第一行元素动态添加行？

【英文标题】：How do we dynamically add rows according to the first row elements in a table using javascript?

【发布时间】：2021-09-09 10:52:53

【问题描述】：

我有一个这样的html表格

<table id="myTable" style="width:100%">
    <tr>
        <th>a</th>
        <th>b</th>
        <th>del</th>    
    </tr> 
   
    <tr>
        <td><input type="text" id="a"></td>
        <td><input type="text" id="b"></td>
        <td><input type="submit" id="del" value="delete"></td>    
    </tr>
    
</table>

我想使用第一行 html 元素（在<td> 内）在表格底部创建一个新行。但在创建新行之前，它必须满足这个条件

Condition:
     At least one of the textboxes in any given row should be not empty

我们可以通过单击行中相应的删除按钮来删除任何行。

编辑：

尝试使用append 和insertRow 方法将行代码附加到表中，但均无效。

mytable = document.getElementById("myTable");

newrow = `<tr>
            <td><input type="text" id="a"></td>
            <td><input type="text" id="b"></td>
            <td><input type="submit" id="del" value="delete"></td>

        </tr>`;

mytable.append(newrow);
mytable.insertRow(newrow);

【问题讨论】：

那么，您的实际问题是什么？我看到了问题的标题。您是否正在尝试确定 A 列或 B 列的输入是否包含任何文本，您是否正在尝试确定如何创建新行，也许您正在寻求不同的说明。不清楚

【参考方案1】：

首先，在表格中创建您想要的最终表格行并将其显示属性设置为无。 然后用javascript判断你想要的字段是否不为空。如果没有字段为空，则将最后一行的 display 属性设置为 block 或 inline-block。

<style>
  #last-rowdisplay: none;
<style>

<table id="myTable" style="width:100%">
    <tr>
        <th>a</th>
        <th>b</th>
        <th>del</th>    
    </tr> 
   
    <tr>
        <td><input type="text" id="a"></td>
        <td><input type="text" id="b"></td>
        <td><input type="submit" id="del" value="delete"></td>
        <td id="last-row">ROW CONTENT</td>
    </tr>
</table>

<script>
var a  = document.getElementById("a").value;
var b = document.getElementById("b").value;

if(a && b)
document.getElementById("last-row").style.display="block";

</script>

【参考方案2】：

使用以下 HTML：

<form id="myForm">
  <table>
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Title 2</th>
      </tr>
    </thead>
    <tbody>
      <tr class="js-row">
        <td><input type="text" /></td>
        <td><input type="text" /></td>
      </tr>
    </tbody>
  </table>
</form>

我们使用querySelector method 来检索我们需要的所有元素：

const form = document.querySelector("#myForm");
const table = form.querySelector(":scope > table > tbody");
const firstRow = table.querySelector(".js-row");

我们可以通过cloning第一行追加一个新行：

function appendTableRow() 
 const cloned = firstRow.cloneNode(true);

 // clear input values
 cloned.querySelectorAll("input").forEach((i) => 
   i.value = "";
 );

 table.append(cloned);

为了验证“任何给定行中至少有一个文本框不应为空”的条件，我们对每一行进行iterate 以查看其输入中的at least one 是否具有值。在此示例中，空字符串被视为“非空”：

function checkForInvalidRow() 
  const rows = Array.from(table.querySelectorAll(".js-row"));
  const hasValue = (input) => input.value !== "";

  return rows.some((row) => 
    const inputs = Array.from(row.querySelectorAll('input[type="text"]'));
    return !inputs.some(hasValue);
  );

可以通过使用addEventListener method 将blur 事件添加到form 元素来检查输入。

form.addEventListener(
  "blur",
  (event) => 
    if (!checkForInvalidRow()) 
      appendTableRow();
    
  ,
  true
);

完整示例：

const form = document.querySelector("#myForm");
const table = form.querySelector(":scope > table > tbody");
const firstRow = table.querySelector(".js-row");

form.addEventListener(
  "blur",
  (event) => 
    if (!checkForInvalidRow()) 
      appendTableRow();
    
  ,
  true
);

function checkForInvalidRow() 
  const rows = Array.from(table.querySelectorAll(".js-row"));
  const hasValue = (input) => input.value !== "";

  return rows.some((row) => 
    const inputs = Array.from(row.querySelectorAll('input[type="text"]'));
    return !inputs.some(hasValue);
  );


function appendTableRow() 
  const cloned = firstRow.cloneNode(true);

  cloned.querySelectorAll("input").forEach((i) => 
    i.value = "";
  );

  table.append(cloned);

<form id="myForm">
  <table>
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Title 2</th>
      </tr>
    </thead>
    <tbody>
      <tr class="js-row">
        <td><input type="text" /></td>
        <td><input type="text" /></td>
      </tr>
    </tbody>
  </table>
</form>