如何划分此页面中的显示，使文本框显示在左侧，数据显示在右侧。 [英] How do I divide the display in this page such that the text boxes appear on the left and the data appears on the right.
本文介绍了如何划分此页面中的显示，使文本框显示在左侧，数据显示在右侧。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< ！doctype html >
< html lang = zh >
< head < span class =code-attribute> id = head1 runat = 服务器 >
< meta charset = utf-8 >
< title > 基督大学计算机科学系：560029 < / title >
< script src = jquery-1.11.1.js > < / script >
< script type = text / javascript > < ; / script >
< link rel = 样式表 类型 = text / css href = g77.css / >
< style >
< / style > ;
< / head < span class =code-keyword>>
< body >
< section >
< script >
var counter = 1;
$（document）.ready（function（）{
$（＃dd1）。mouseenter（function（）{
$（＃z1）。fadeIn （）;
$（＃z2）。fadeIn（）;
$（＃z3）。fadeIn（）;
}）;
$（＃button1）。click（function（）{
$（＃button1）。hide（）;
$（＃mainContent）。hide（）;
$（＃dd1）。hide（）;
$（＃add）。hide（）;
$（＃f1）。hide（）;
print（）;
$（＃button1）。show（）;
$（＃mainContent）。show（）;
$（＃dd1）。 show（）;
$（＃add）。show（）;
$（＃f1）。show（）;
}）;
$（＃add）。click（function（）{
var elem = $（＃dd1）。val（）;
var str =;
var str2 =;
if（elem ==heading）{
str =< span > 标题< / span > < 输入 type =' text' onkeyup =' func1（this.id）;' class =' ' id =' t_+ elem + counter +' > < / input > ;
str2 =< h1 id =' h_+ elem + counter + ' class =' ct' > < / h1 > ;
}
else if（elem ==paragraph）{
str =< span > 段落< / span > < input type =' text' onkeyup =' func2（this.id）;' class =' ' id =' t_+ elem + counter +' > < / input > ; ;
str2 =< p id =' p_+ elem + counter + ' class =' c' > < < span class =code-leadattribute> / p > ;
}
else if（elem ==sub-heading）{
str =< span > 子标题< / span > < input type =' text' onkeyup =' func1（this.id）;' class =' ' id =' t_+ elem + counter +' > < / input > ;
str2 =< h3 id =' h_+ elem + counter + ' class =' subct' > < / h3 > ;
}
$（＃mainContent）。append（str）;
$（＃printArea）。append（str2）;
++ counter;
}）;
}）;
函数func1（id）{
var value = $（＃+ id）.val（）;
var id2 = id.split（_）[1];
$（＃h _+ id2）。text（value）;
}
函数func2（id）{
var value = $（＃+ id）.val（）;
var id2 = id.split（_）[1];
$（＃p _+ id2）。text（value）;
}
< / script < span class =code-keyword>>
< /部分 >
< 部分 >
< 选择 id = dd1 >
< 选项 > -----选择----- < / option >
< 选项 id = z1 value = 标题 > 标题< / option >
< 选项 id = z2 value = 子标题 > Sub-He ading < / option >
< 选项 id = z3 value = 段落 > 段落< /选项 >
< 选项 id = z4 value = pageb > 分页符< / option >
< / select >
< 按钮 id = add onclick = < span class =code-keyword> > 添加< / button >
< < /跨度> 按钮 id = button1 > PRINT / SAVE < / button >
< p id = mainContent > < / p >
< p id = printArea > < / p >
< / section >
< / body >
< / html >
解决方案
（document）.ready（function（）{
（＃dd1）。mouseenter（function（）{
（＃z1 ）.fadeIn（）;
<!doctype html>
<html lang="en">
<head id="head1" runat="server">
<meta charset="utf-8">
<title>Department of Computer Science Christ University:560029</title>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="g77.css"/>
<style>
</style>
</head>
<body>
<section>
<script>
var counter = 1;
$(document).ready(function () {
$("#dd1").mouseenter(function () {
$("#z1").fadeIn();
$("#z2").fadeIn();
$("#z3").fadeIn();
});
$("#button1").click(function () {
$("#button1").hide();
$("#mainContent").hide();
$("#dd1").hide();
$("#add").hide();
$("#f1").hide();
print();
$("#button1").show();
$("#mainContent").show();
$("#dd1").show();
$("#add").show();
$("#f1").show();
});
$("#add").click(function () {
var elem = $("#dd1").val();
var str = " ";
var str2 = " ";
if (elem == "heading") {
str = "<span> Heading </span><input type='text' onkeyup='func1(this.id);' class='' id='t_" + elem + counter + "'></input>";
str2 = "<h1 id='h_" + elem + counter + "'class='ct'></h1>";
}
else if (elem == "paragraph") {
str = "<span> Paragraph </span><input type='text' onkeyup='func2(this.id);' class='' id='t_" + elem + counter + "'></input> ";
str2 = "<p id='p_" + elem + counter + "' class='c'></p>";
}
else if (elem == "sub-heading") {
str = "<span> Sub-Heading </span><input type='text' onkeyup='func1(this.id);' class='' id='t_" + elem + counter + "'></input>";
str2 = "<h3 id='h_" + elem + counter + "'class='subct'></h3>";
}
$("#mainContent").append(str);
$("#printArea").append(str2);
++counter;
});
});
function func1(id) {
var value = $("#" + id).val();
var id2 = id.split("_")[1];
$("#h_" + id2).text(value);
}
function func2(id) {
var value = $("#" + id).val();
var id2 = id.split("_")[1];
$("#p_" + id2).text(value);
}
</script>
</section>
<section>
<select id="dd1">
<option>-----Select-----</option>
<option id="z1" value="heading">Heading</option>
<option id="z2" value="sub-heading">Sub-Heading</option>
<option id="z3" value="paragraph">Paragraph</option>
<option id="z4" value="pageb">Page Break</option>
</select>
<button id="add" onclick="">Add</button>
<button id="button1">PRINT/SAVE</button>
<p id="mainContent"></p>
<p id="printArea"></p>
</section>
</body>
</html> 解决方案
(document).ready(function () {
("#dd1").mouseenter(function () {
("#z1").fadeIn();
这篇关于如何划分此页面中的显示，使文本框显示在左侧，数据显示在右侧。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
