动态表格中的可编辑单元格 [英] Editable cells in dynamic table

问题描述

我试图用变量no做一个动态表。行和列。表格已创建，但是当我点击单元格时，它们不可编辑，因为我认为它们将会是。

  $（document）.ready（function（）{$（＃createit）。click（function（）{var num_rows = document.getElementById（'rows'）.value; var num_cols = document .getElementById（ '的cols'）值; VAR TBODY = '';对于（VAR I = 0; I< NUM_ROWS;我++）{TBODY + = '< TR>';对于（VAR J = 0; J< ; NUM_COLS; J ++）{TBODY + = '< TD的tabindex =' + J + '>'; TBODY + = '细胞' + I + J; TBODY + = '< / TD>'} TBODY + =' < / tr>';} //文档.getElementById（'wrapper'）。innerHTML = theader + tbody + tfooter; $（ editableTable。）追加（TBODY）。 }）; }）; $（。editableTable td）。dblclick（function（）{console.log（'clicked'）; var OriginalContent = $（this）.text（）; $（this）.addClass（cellEditing）; $（这一点）。html的（ <选择><选项→1< /选项><选项→2< /选项><选项→3< /选项>< /选择> 中）; $（本） （）。$（this）.bgColor ='red'; $（this）.children（）。first（）。keypress（function（e）{if（e.which = （原始内容）; $（this）.parent（）。removeClass（cellEditing）;}}）; $（this）.children（）= 13）{var newContent = OriginalContent; $（this）.parent ）.first（）。blur（function（）{$（this）.parent（）。text（OriginalContent）; $（this）.parent（）。removeClass（cellEditing）;}）;}）; $（。editableTable td）。bind（'keydown'，function（event）{if（event.keyCode === 9 || event.keyCode === 13）{var tabindex = $（this）.attr（ 'tabindex'）; tabindex ++; // increment tabindex $（'[tabindex ='+ tabindex +']'）。focus（）。dblclick（）; return false;}}）;  

.editableTable {border：solid 0px;宽度：100％; text-align：center} .editableTable td {border：solid 0.5px;边框颜色：浅蓝色; min-width：100px; } .editableTable .cellEditing {padding：0; } select {border：0px;宽度：100％; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< label>行：< input type =textname =rowsid = rows/>< / label>< br /> < label> Cols：< input type =textname =colsid =cols/>< / label>< br /> < input name =generatetype =buttonvalue =Create Table！ id ='createit'/> < div id =wrapper> < table class =editableTable> < TBODY>< / tbody的> < /表> < / div>  

一个静态表。的jsfiddle https://jsfiddle.net/rbrohitbisht/691rx62k/

现在我想用动态表做同样的事情。我在这里做错了什么？

解决方案

该操作应移入createit处理程序定义中。
$ b

  $（。editableTable td）。dblclick（function（）{...}）; 
  

紧接在单元格创建之后（当然点击克里特表格后！）。

否则，在动态表就位之前，选择器$（。editableTable td）不会返回任何内容。

I'm trying to make a dynamic table with variable no. of rows and columns. Table is created but when i click on the cells, they are not editable as i assumed they will be.

$(document).ready(function() {
            $("#createit").click(function() {
                var num_rows = document.getElementById('rows').value;
                var num_cols = document.getElementById('cols').value;
                var tbody = '';
                for (var i = 0; i < num_rows; i++) {
                    tbody += '<tr>';
                    for (var j = 0; j < num_cols; j++) {
                        tbody += '<td tabindex=' + j + '>';
                        tbody += 'Cell' + i + j;
                        tbody += '</td>'
                    }
                    tbody += '</tr>';
                }
                //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
                $('.editableTable').append(tbody);
            });
        });
        $(".editableTable td").dblclick(function() {
            console.log('clicked');
            var OriginalContent = $(this).text();
            $(this).addClass("cellEditing");
            $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
            $(this).children().first().focus();
            $(this).bgColor = 'red';

            $(this).children().first().keypress(function(e) {
                if (e.which == 13) {
                    var newContent = OriginalContent;
                    $(this).parent().text(OriginalContent);
                    $(this).parent().removeClass("cellEditing");
                }
            });
            $(this).children().first().blur(function() {
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
            });
        });
        $(".editableTable td").bind('keydown', function(event) {
            if (event.keyCode === 9 || event.keyCode === 13) {
                var tabindex = $(this).attr('tabindex');
                tabindex++; //increment tabindex
                $('[tabindex=' + tabindex + ']').focus().dblclick();
                return false;
            }
        });

.editableTable {
            border: solid 0px;
            width: 100%;
            text-align: center
        }

        .editableTable td {
            border: solid 0.5px;
            border-color: lightblue;
            min-width: 100px;
        }

        .editableTable .cellEditing {
            padding: 0;
        }

        select {
            border: 0px;
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
    <input name="generate" type="button" value="Create Table!" id='createit' />
    <div id="wrapper">
        <table class="editableTable">
            <tbody></tbody>
        </table>
    </div>

Same thing i have done before but with a static table. JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/

Now i want to do the same thing with the dynamic table. What i'm doing wrong here?

解决方案

The operation should be moved into the createit handler definition.

 $(".editableTable td").dblclick(function() {...});

Just after the cells are created(of course after a click on Crete Table!).

Otherwise the selector $(".editableTable td") would not return anything before the dynamic table is in place.

这篇关于动态表格中的可编辑单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！