クリックイベントのテーブル内の​​要素にフォーカスできない

Question

私はテーブルを持っています。ボタンをクリックすると、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>

Answer 1

あなたのコードが正しく動作しています。それはあなたがどのようなブラウザを使用している

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>