我在表中有行列结构。我每两秒更新一次内容,因为我需要同时在另一个浏览器上显示更改。现在我通过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 -->