时间戳

首页 > 解决方案 > 我们如何使用javascript根据表格中的第一行元素动态添加行？

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

问题描述

我有一个这样的 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>

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

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

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

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

编辑：

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

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);

标签： javascripthtmldomhtml-table

解决方案

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

<style>
  #last-row{display: 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>

推荐阅读