1

編集ボックスをクリックするたびに、入力フィールド (テキスト) が選択されたままにならないか、その入力フィールドにフォーカスが戻りません。

この編集ボックスは表にあることに注意してください。ただし、これは Firefox の問題である google chrome では正常に機能します。

これが私のコードです：

<script>
$(document).ready(function () {
    $('td.edit').click(function () {
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
        $('#editbox').focus();
    });
    $('td.edit').keydown(function (event) {
        arr = $(this).attr('class').split(" ");
        if (event.which == 13) {
            $.ajax({
                type: "POST",
                url: "supplierprice/config.php",
                data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                success: function (data) {
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                }
            });
        }
    });
    $('#editbox').live('blur', function () {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
}); 


</script>

私のHTML

<table id="sorting" class="tablesorter" style="width: 100px; table-layout: fixed;" >

<thead>
<tr>
<th>6xxA <span>  <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 17px"></span>
<th>6xxB <span>  <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 21px"></span>
</th>
<th  >10xx <span> <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 32px"></span>
</th>
<th >11xx <span> <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 32px"></span>
</th>
</tr>
</thead>

<tbody >
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");



$sql = mysql_query("SELECT * FROM supplierprice");


while($rows=mysql_fetch_array($sql))
{

if($alt == 1)
        {
           echo '<tr class="alt">';
           $alt = 0;
        }
        else
        {
           echo '<tr>';
           $alt = 1;
        }

echo '  <td class="edit region '.$rows["supp_price_id"].'">'.$rows["region"].'</td>
        <td class="edit country '.$rows["supp_price_id"].'">'.$rows["country"].'</td>
        <td class="edit networkname '.$rows["supp_price_id"].'">'.$rows["networkname"].'</td>
            <td class="edit mcc '.$rows["supp_price_id"].'">'.$rows["mcc"].'</td>    
            <td class="edit mnc '.$rows["supp_price_id"].'">'.$rows["mnc"].'</td>
            <td class="edit mnp '.$rows["supp_price_id"].'">'.$rows["mnp"].'</td>


        </tr>';


}

?>


</td>


</tbody>


</table>
4

1 に答える 1

0 
$('td.edit').click(function() {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');

        //Id must be unique, assuming only one element with id="editbox" exixts
        $('#editbox').focus();

        //return false
        return false;

    });

注: HTML 構造が正しく、ID (編集ボックス) が一意であることを確認してください :)

于 2013-10-04T07:44:42.113 に答える