在 editable html table uneditable 中创建列

Question

我有一个 HTML table 是我从 pandas 数据框（使用 DataFrame.to_html()）创建的。我希望 table 中的某些列成为 editable，所以我在 table 上使用了 contentEditable，但我无法弄清楚如何为某些列禁用它。我使用的是 Django，因此数据框在我看来被转换为 html table，然后传递到我的 html 模板。

html/js 看起来像这样：

<div class="table-responsive" contentEditable="True">
      {{ table | safe }}
</div>
<form class="form-horizontal">
  <div class="text-center">
    <button class="btn btn-primary" id="delete"><span class="glyphicon glyphicon-trash"></span> Delete Task</button>
  </div>
</form>
<form class="text-center">
  <a href="/InterfaceApp/Editor" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-repeat"></span> Start a new search</a>
</form>
<script>
  $(document).ready(function(){
    document.getElementById("task_table").className = "table table-hover";

    document.getElementById("task_table").tHead.contentEditable = false;
    console.log(document.getElementById("task_table").firstChild.nodeValue);
  });
</script>

我制作 table 的 python 看起来像这样：

data = pandas_dataframe_here
table = re.sub(' task_table', '" id="task_table', data.to_html(classes='task_table'))
return render(request,'InterfaceApp/editTasks.html',table)

我希望用户能够编辑除 table 的第 15 和 16 列以外的所有内容。有什么方法可以将 table 中的特定列的 contentEditable 设置为 false？

Answer 1

您可以循环遍历所有行元素并将第 15 和第 16 列的 contentEditable 属性设置为 false。

$(function() {
    $("tr").each(function() {
        $(this).find("td:eq(14), td:eq(15)").attr("contentEditable", false);
    });
});

在 editable html table uneditable 中创建列

Make columns in an editable html table uneditable

html

javascript