Question

我在表中有行列结构。我每两秒更新一次内容，因为我需要同时在另一个浏览器上显示更改。现在我通过ajax更新内容并在外部div中填充响应但是当响应填充时我我无法在列中输入新内容，因为ajax响应会暂停键入，而鼠标光标位于第一列。我们如何解决它我的格式是这样的

它不像表格那样优秀，但就像excel表一样

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery.min_1.7.2.js"></script>

<!--jQuery UI scripts-->
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.selectable.js"></script>   
<!--END @ jQuery UI scripts-->

<script type="application/javascript" src="js/jquery.contenteditable.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script>
setInterval(function(){
//call your function here
//alert("chgdfg");
var col_value=$('.Table').html();
 $.post( "ajax_test.php", { action : 'aftertimeout' ,col_value: col_value})
.done(function( resp ) {
 //console.log(resp);
$('.Table').html(resp);
 //select_reinitilaize();
});
 }, 5000);
</script>

<span style="display:none;" id="select-result"></span>
<span style="display:none;" id="select-for"></span>
<div class="pannel">  
 <div class="text_pannel">
<div class="btn_cont">
<div id="edit" class="unselect chr" title="Toggel Edit">T/E</div>
</div>
<div class="btn_cont">
<div class="chr bold" id="bold" title="Bold">B</div>
</div>
<div class="btn_cont">
<div class="chr italicFont" id="italic" title="Italic">I</div>
</div>
<div class="btn_cont">
<select class="btn selectList" title="Font Size" id="font_size">
<?php for($i=8; $i<=48; $i++){ if($i%2!=0) continue;?>
<option value="<?php echo $i; ?>px"><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
<div class="btn_cont" id="font_color_select">
<div class="chr" title="Font Color">A</div>
</div>
<div class="btn_cont" id="field_color_select">
<div class="chr" title="Background Color" style="background-color:#FFCCFF;">A</div>
</div>
<div class="btn_cont">
</div>
<div class="clear"></div>
</div>
</div>
<!--END @ ACTION_PANEL-->
<!--COLOR_BOX-->
<!--END @ COLOR_BOX-->
<div class="Table">
<div id="selectable">
<!--HORIZONTAL_COUNT-->
<div class="Heading">
<div class="Cell first">
<p></p>
</div>
<div class="Cell">
<p>A</p>
</div>
<div class="Cell">
<p>B</p>
</div>
            <div class="Cell">
                <p>C</p>
            </div>
            <div class="Cell">
                <p>D</p>
            </div>
            <div class="Cell">
                <p>E</p>
            </div>

            </div>
        </div>
        <!--END @ HORIZONTAL_COUNT-->
        <!--ROWS-->
        <?php for($i=1; $i<=1; $i++){ ?>
        <div class="Row">
            <div class="Cell first">
                <p><?php echo $i; ?></p>
            </div>
            <div class="Cell">
                <p contentEditable="true" id="A<?php echo $i; ?>"></p>
            </div>
            <div class="Cell">
                <p contentEditable="true" id="B<?php echo $i; ?>"></p>
            </div>
            <div class="Cell">
                <p contentEditable="true" id="C<?php echo $i; ?>"></p>
            </div>
            <div class="Cell">
                <p contentEditable="true" id="D<?php echo $i; ?>"></p>
            </div>
            <div class="Cell">
                <p contentEditable="true" id="E<?php echo $i; ?>"></p>
            </div>
            </div>  <!-- row end here -->
        <?php }?>
        </div>

    </div>
</div>  <!-- container -->

Ajax响应停止在div内容中输入可编辑的内容

0 个答案: