无法关注点击事件中表格中的元素

时间:2016-07-15 20:05:11

标签: javascript jquery html asp.net-mvc

我有一个表,当我点击一个按钮时,我想将contenteditable设置为true,然后将焦点放在td元素上,以便客户端看到一个光标在单元格中闪烁。

我似乎无法专注于LicenseName单元格。我知道' tableData'变量包含正确的元素,我已在浏览器调试器中检查过它。

这是我尝试过的。



editLicensesDetails = function (e) {
        var tableRow = $(e.target).parent().parent();
        $(tableRow).css('background-color', '#dff0d8');
        $(tableRow).children('[contenteditable]').attr("contenteditable", "true");
        var tableData = $(tableRow).children('[contenteditable]')[0];
        $(tableData).focus();
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table id="tableLicenseDetails" style="width:100%;">
                    <tr>
                        <th>Edit</th>
                        <th>Delete</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Product</th>
                        <th>Unit Of Measure</th>
                        <th>Variable Rate</th>
                    </tr>
                  <tr>
                            <td style="display:none;">@license.LicenseId</td>
                            <td>
                                <i class="fa fa-pencil" aria-hidden="true"></i>
                            </td>
                            <td>
                               <i class="fa fa-trash" aria-hidden="true"></i>
                            </td>
                            <td contenteditable="false">@license.LicenseName</td>
                            <td contenteditable="false">@license.LicenseDescription</td>
                            <td>@license.TradePulseProductName</td>
                            <td>@license.LicenseUnitOfMeasureTypeName</td>
                            <td>@license.IsVariableRate</td>
                        </tr>
                </table>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您的代码运行正常。这意味着当您调用editLicensesDetails函数

时出现问题

  var tableRow = $('tr');
  $(tableRow).css('background-color', '#dff0d8');
  $(tableRow).children('[contenteditable]').attr("contenteditable", "true");
  var tableData = $(tableRow).children('[contenteditable]')[0];
  $(tableData).focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td contenteditable="false">LicenseName</td>
    <td contenteditable="false">LicenseDescription</td>
   
  </tr>
</table>