Javascript 在modal中使表格可编辑

我有3个表，每个表有两列（）。我想使表格可编辑（编辑行、添加行、删除行），但我有点不知所措。每个表格行都有一个编辑按钮，每个表格的末尾都有一个“添加”按钮

如果我想让模态标题显示edit或add，我需要制作两个不同的模态，或者有没有办法在JS中实现这一点

如何使表格可编辑？我试着整理一些JS（见下文）

模态：

<div class="modal" id="modal">
        <div class="modal-header">
          <div class="modal-titel">Edit Account</div>
          <button data-close-button class="close-button">&times;</button>
        </div>
        <div class="modal-body"><input type="text" id="new_acc" placeholder="Name"><br><br><input type="text" id="new_balance" placeholder="Currency"><br><br><input type="text" placeholder="Balance"></div>
        <div class="modal-actionbox">
          <input type="button" class="modal-action" value="ID values should always be unique.

Sorry, when I wrote this I was thinking you were using jquery. Still, it should get you onto the right path.

    $(function () {
    // add click action to your edit buttons
    $('.edit_account').on('click', function(e){
        // get the parent table row
        row = $(e.target).parent().parent();
        
        // get cell data
        c = row.children();
        name = c[0].textContent;
        amount = c[1].textContent;
        
        // populate modal with data from selected table row
        $('#modal_type').val(name);
        $('#modal_price').val(amount);
        
        // pass table row ID to the modal
        $('#row_num').val(row.attr('id'));
        
    });
    
    // On modal save
    $('#save').on('click', function(){
        // get the table row ID that was passed to the modal
        row_id = $('#row_num').val();
        // get the table row to update
        row = $('#'+row_id);
        
        // update the table row's cells with data from the modal fields
        c = row.children();
        $(c[0]).text($('#modal_type').val()); // name
        $(c[1]).text($('#modal_price').val()); // price
    });
    
});


编辑帐户
&时代；





ID值应始终是唯一的

抱歉，当我写这篇文章时，我以为你在使用jquery。不过，这应该会让你走上正确的道路

$（函数（）{
//将单击操作添加到编辑按钮
$（'edit_account'）。在（'click'，函数（e）{
//获取父表行
行=$（e.target）.parent（）.parent（）；
//获取单元格数据
c=行。子对象（）；
name=c[0].textContent；
金额=c[1]。文本内容；
//使用选定表格行中的数据填充modal
$（'模态类型'）.val（名称）；
$（'modal#u price'）.val（金额）；
//将表行ID传递给模式
$（'#row_num'）.val（row.attr（'id'））；
});
//论模态保存
$（'#save'）。在（'单击'，函数（）上）{
//获取传递给模型的表行ID
row_id=$（'#row_num'）.val（）；
//获取要更新的表行
行=$（“#”+行id）；
//使用模式字段中的数据更新表格行的单元格
c=行。子对象（）；
$（c[0]）.text（$（'#模态类型'）.val（）；//名称
$（c[1]）.text（$（'#model_price'）.val（）；//price
});
});

模式中的字段如下所示：

<input type="hidden" id="row_num" value=""/>
<input id="modal_type" type="text" value=""><br/>
<input id="modal_price" type="text" value="">

ID值应始终是唯一的

抱歉，当我写这篇文章时，我以为你在使用jquery。不过，这应该会让你走上正确的道路

$（函数（）{
//将单击操作添加到编辑按钮
$（'edit_account'）。在（'click'，函数（e）{
//获取父表行
行=$（e.target）.parent（）.parent（）；
//获取单元格数据
c=行。子对象（）；
name=c[0].textContent；
金额=c[1]。文本内容；
//使用选定表格行中的数据填充modal
$（'模态类型'）.val（名称）；
$（'modal#u price'）.val（金额）；
//将表行ID传递给模式
$（'#row_num'）.val（row.attr（'id'））；
});
//论模态保存
$（'#save'）。在（'单击'，函数（）上）{
//获取传递给模型的表行ID
row_id=$（'#row_num'）.val（）；
//获取要更新的表行
行=$（“#”+行id）；
//使用模式字段中的数据更新表格行的单元格
c=行。子对象（）；
$（c[0]）.text（$（'#模态类型'）.val（）；//名称
$（c[1]）.text（$（'#model_price'）.val（）；//price
});
});

模式中的字段如下所示：

<input type="hidden" id="row_num" value=""/>
<input id="modal_type" type="text" value=""><br/>
<input id="modal_price" type="text" value="">

1.对于模式标题，给它一个ID，并在显示模式时使用jquery设置文本，您可以让它说“编辑”或“添加”。对于可编辑表，不需要单独的modalsAs，有各种jquery插件。如果您希望使用自己的属性，可以尝试使用contentEditable属性，不过如果我记得的话，这可能会对表产生一些问题。另一个选择是使单元格成为文本字段；有了CSS，你可以让它们看起来像普通的单元格。谢谢你的回复。我将尝试你第一次评论中的建议。关于编辑表格，我希望表格可以通过模式进行编辑，而不是直接编辑。我该怎么做呢？我明白了，你的模式会像一个表单或什么的，然后更新表中的特定单元格？我以为你的意思是桌子会在模态中。如果为每一行（TR）分配一个ID，当您打开模式时，您可以从该行获取数据以预填充模式，并在确认后将该数据复制到相应行的单元格中。你是在为你的模态使用bootstrap吗？是的，从表中获取模态输入字段的数据就是我的意思。我没有使用引导。这只是html和js（我问题中的第三位代码）。对于模式标题，给它一个ID，并在显示模式时使用jquery设置文本，您可以让它说“编辑”或“添加”。对于可编辑表，不需要单独的modalsAs，有各种jquery插件。如果您希望使用自己的属性，可以尝试使用contentEditable属性，不过如果我记得的话，这可能会对表产生一些问题。另一个选择是使单元格成为文本字段；有了CSS，你可以让它们看起来像普通的单元格。谢谢你的回复。我将尝试你第一次评论中的建议。关于编辑表格，我希望表格可以通过模式进行编辑，而不是直接编辑。我该怎么做呢？我明白了，你的模式会像一个表单或什么的，然后更新表中的特定单元格？我以为你的意思是桌子会在模态中。如果为每一行（TR）分配一个ID，当您打开模式时，您可以从该行获取数据以预填充模式，并在确认后将该数据复制到相应行的单元格中。你是在为你的模态使用bootstrap吗？是的，从表中获取模态输入字段的数据就是我的意思。我没有使用引导。这只是html和js（我的问题中的第三位代码）。感谢您抽出时间！我想出了如何更改标题，下一步我将尝试这个。好消息是它可以工作！文本显示在模态中。不过，我还是没办法让储蓄发挥作用。我在模式中有一个保存按钮，但它什么都不做模式保存使用的是jquery for