html table+css实现可编辑表格的示例代码

<p>要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。</p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table id="editableTable"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;Gender&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td contenteditable="true"&gt;John Doe&lt;/td&gt;
                &lt;td contenteditable="true"&gt;25&lt;/td&gt;
                &lt;td contenteditable="true"&gt;Male&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td contenteditable="true"&gt;Jane Smith&lt;/td&gt;
                &lt;td contenteditable="true"&gt;30&lt;/td&gt;
                &lt;td contenteditable="true"&gt;Female&lt;/td&gt;
            &lt;/tr&gt;
            &lt;!-- 添加更多行 --&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;script&gt;
        // 获取可编辑表格
        var table = document.getElementById('editableTable');
        // 遍历表格，为每个单元格添加事件侦听器
        for (var i = 0; i &lt; table.rows.length; i++) {
            for (var j = 0; j &lt; table.rows[i].cells.length; j++) {
                table.rows[i].cells[j].addEventListener('input', function () {
                    // 处理输入事件，可以在此处进行逻辑处理或保存数据
                    console.log(this.textContent);
                });
            }
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
<p>在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable=&quot;true&quot; 属性的单元格可以被鼠标点击并接受用户输入。</p>
<p>JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。</p>
<p>点击表格前：</p>
<p style="text-align:center"><img alt="" src="/d/file/uploads/allimg/c240615/1GT1b5036430-14T16.png" /></p>
<p>点击表格后：</p>
<p style="text-align:center"><img alt="" src="/d/file/uploads/allimg/c240615/1GT1b504GZ-151T0.png" /></p>
<p>到此这篇关于html table+css实现可编辑表格的示例代码的文章就介绍到这了,更多相关html可编辑表格 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！</p>
                        
                        <div class="clearfix">
                        <span id="art_bot" class="jbTestPos"></span>
                        </div>
                    </div><!--endmain-->

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载