如何用js将数据导入表格中(语言-javascript)

img

img

img

 op/js/zibo.html                                                                                                                                A
                   此页面显示
                   您确定要删除吗?
                                                                                   确定                取消
               总食丽白·                   猪肉串子
                                                        点餐          取消
                                               菜品           数量           单价  序号桌号                                               删除          修改
                                              猪肉串1000.01元                                  删除  1        1                                                修改

img

img

怎样将文本框输入的内容导入下方表单中,修改按钮内衔接的小表单应该怎样实现,有懂的朋友指点帮忙一下

输入后,保存然后放到表单中,很简单。
1.输入后如何获取输入的值,并保存
2.如何将保存的值显示在下方表单中
第一个获取表单提交,获取表单控件值(百度)
第二步确定后新增一行,点击事件操作(百度)
如何在表格中新增一行(百度)
还不会就把代码给出,帮你改两行就行了

表格 tr 是动态 循环出来的。只要控制数就行 。删除\新增、修改都是对数据的操作

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/881887
  • 你也可以参考下这篇文章:【javascript】js获取数组中数值最大的数
  • 同时,你还可以查看手册:javascript 在浏览器中调试 中的内容
  • 除此之外, 这篇博客: js基础面试题中的 在Javascript中什么是伪数组?如何将伪数组转化为标准数组? 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

  • 您还可以看一下 侯红彪老师的JavaScript 基础到进阶案例课程中的 删除内容、数量改变功能实现小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    解决方案:

    针对第一个问题“用JavaScript将数据导入表格中”,可以通过以下步骤实现:

    1.获取用户在文本框中输入的内容。可以通过document.getElementById()方法获取对应的文本框,并使用input.value属性获取文本框中输入的值。

    let value = document.getElementById("input1").value;
    

    2.创建一个tr节点,表示表格中的一行。然后在该行中创建td节点,表示表格中的一列,并将获取到的值插入该列中。

    let row = document.createElement("tr");
    let cell = document.createElement("td");
    cell.innerHTML = value;
    row.appendChild(cell);
    

    3.将新创建的tr节点插入到表格中。

    let table = document.getElementById("table1");
    table.appendChild(row);
    

    至此,就完成了将用户输入的内容导入到表格中的操作。

    针对第二个问题“如何实现删除按钮内的小表单”,可以通过以下步骤实现:

    1.给删除按钮设置一个onclick事件,当用户点击删除按钮时,触发该事件。

    <button onclick="deleteRow(this)">删除</button>
    

    2.在事件处理程序中获取到要删除的行,并使用parentNode.removeChild()方法从表格中删除该行。

    function deleteRow(btn) {
      let row = btn.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
    

    至此,就完成了删除操作。

    注:以上代码只是一个简单示例,具体实现还需要根据实际需求进行调整和完善。另外,在进行删除操作时,最好再添加一个确认框,以避免误操作导致数据的丢失。