内容可编辑 - JQuery 仅将内容保存到网页(以及添加和删除）

经过深入研究，我能够允许在我的表中编辑和更新一个数据值。但是，当我尝试更改可以编辑内容可编辑的位置时，它会删除我的表格格式（它实际上完全删除了表格格式，使我的想法毫无意义。

这是我当前的代码。

              <div class="bs-docs-example">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>IRC Name</th>
                  <th>Ingame Name</th>
                  <th>Position</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>[Cr|m|nAl]</td>
                  <td id="content2" contenteditable="true">Herbalist</td>
                  <td>Aeterna Top</td>
                </tr>
                <tr>
                  <td >2</td>
                  <td >bandido</td>
                  <td >Bananni</td>
                  <td >Aeterna Top</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Funkystyle</td>
                  <td>Funkystyle</td>
                  <td>Aeterna Top</td>
                </tr>
              </tbody>
            </table>
          </div>
    </div>
</div>
    <button id="save">Save Changes</button>
<!-- begin the script -->
<script src="js/jquery.js" type="text/javascript"></script>
<script>
    var theContent = $('#content2');// set the content
    $('#save').on('click', function () { // store the new content in localStorage when the button is clicked
        var editedContent = theContent.html();
        localStorage.newContent = editedContent;
    });
    if (localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage
        theContent.html(localStorage.getItem('newContent'));
    }
</script>

现在，理想情况下，我希望它输出如下屏幕截图;https://i.stack.imgur.com/SOoeI.png"游戏内名称"列可编辑。添加行/删除行，我也想实现，但我不太确定您是否可以使用如此简单的 HTML 表来做到这一点。

我的第一个问题——如何使特定行（即游戏名称）成为唯一可编辑的行？我很糟糕的Javascript/Jquery，不幸的是，我的研究只允许我细化一行。（我知道我可能会复制javascript/jquery，但肯定有更简单的方法吗？

第二个问题——

是否可以实际添加HTML表添加/删除行的功能，而无需某种数据库？

感谢您对此的任何指导。