求助：表单中的文本输入（input）与下拉选择（select）里的文字无法水平居中

epoecq 2013-02-25 01:50:45
网上找到此代码后，边学边想，觉得此表仍不完善，所以把学习中觉得还不够完美的片段发到这里，请高手帮助改一下。本人编程水平相当差，所以想了很多办法，网上也找了不少方案，却都不起作用。只好再向高手请教。
下边的表格中查到两个问题：一是，下拉选择框内的文字居左，有点不美观，但网上找的不少居中代码，都未能使下边的表格内的文字居中。过去在不少表格中都轻易的做到文字居中，但不知为什么，这个表格中却难做到。二是，此表的文本输入框内的文字也无法居中。以前不少表格中用代码使文字居中显示，可这次却不行。不知原因在哪。请高手赐教。
此表代码太长，分两段发。请高手复制到记事本上，用IE打开试试看，然后想办法解决一下以上问题。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单文本输入与下拉选择中的字体居中问题的交流</title>
<style type="text/css">
<!--
.DoubleColorTable tr{background-color:expression(rowIndex%2==0?'#FCF5DA':'#FFFFFF');
font-size: 12px;
}
-->
</style>
<link href="cc.css" rel="stylesheet" type="text/css">
<SCRIPT language=JavaScript>
function $(o){return document.getElementById(o)}
window.onload=function init(){
var input_obj=$("amount_price_total").getElementsByTagName("input"),j=input_obj.length;
for(var i=0;i<j;i++){
if (input_obj[i].id.indexOf("price")!=-1){
input_obj[i].onblur=function(){calculate(this.id);calculate_total();}
var _id = input_obj[i].id.substring(5) ;
$('amount' + _id).onchange = function(__id){
return function(){
if($('price'+__id).value > 0){
calculate('price'+__id);
calculate_total();
}
}
}(_id);
}
}
}
function calculate(id){//金额
var numlen=id.substring(5,id.length)
var v_amount=$("amount"+numlen).value
var v_price=$(id).value
if (v_amount>0&&v_price>0){
$("total"+numlen).value=Math.ceil(v_amount*v_price*1000)/1000;//保留三位
$("amount"+numlen).onblur=function(){calculate(id);calculate_total();}
}
else if (v_amount==""||v_price==""){
$("amount"+numlen).value=""
$(id).value=""
$("total"+numlen).value=""
}
else {
$("total"+numlen).value="非法输入"
}
}
function calculate_total(){//合计
var temp_total=0+1-1;
var input_obj=$("amount_price_total").getElementsByTagName("input"),j=input_obj.length;
for(var i=0;i<j;i++){
if (input_obj[i].id.indexOf("total")!=-1 && input_obj[i].value>0){
var numlen=input_obj[i].id.substring(5,input_obj[i].id.length)
var v_amount=$("amount"+numlen).value
var v_price=$("price"+numlen).value
temp_total+=v_amount*v_price
}
}
temp_total=Math.ceil(temp_total*100)/100;//保留二位
$("tt").innerHTML="("+temp_total+"元) ￥"+bigwrite(temp_total)
}
function bigwrite(x){//转换大写
var caiying2007_bp=["元","拾","百","千","万","拾","百","千","亿","拾","百","千","万"];//最高位为"万亿"，不够用时可依律增加
var caiying2007_ap=["角","分正"]
var caiying2007_s=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"]
//获取整数并转换大写
if (x>=1){//金额不小于1元
var caiying2007_b=x.toString().split(".")[0].split(""),k=caiying2007_b.length
//个位以前
for (var i=0;i<k-1;i++){
if ((k-i)==9 && parseInt(caiying2007_b[i])==0){//亿
caiying2007_b[i]=caiying2007_bp[k-i-1];
}
if ((k-i)==5 && parseInt(caiying2007_b[i])==0){//万
var poo=false
for (var p2=1;p2<4;p2++){
if (parseInt(caiying2007_b[i-p2])!=0){poo=true;p2=100}
}
caiying2007_b[i]=(poo)?caiying2007_bp[k-i-1]:"";
}
}
for (var i=0;i<k-1;i++){
if (parseInt(caiying2007_b[i])==0)caiying2007_b[i]=(caiying2007_b[i-1]=="零" ||caiying2007_b[i-1]=="")?"":"零";
else caiying2007_b[i]=(caiying2007_b[i]=="零")?"零":(caiying2007_b[i]=="亿")?"亿":(caiying2007_b[i]=="万")?"万":(caiying2007_b[i]=="")?"":caiying2007_s[parseInt(caiying2007_b[i])]+caiying2007_bp[k-i-1]
}

//个位
caiying2007_b[k-1]=(parseInt(caiying2007_b[k-1])==0)?caiying2007_bp[0]:caiying2007_s[parseInt(caiying2007_b[k-1])]+caiying2007_bp[0]
caiying2007_b_=caiying2007_b.join("")
//去无效"零",如要求保留"零亿"／"零万"／"零元",屏蔽或删除下面三句
caiying2007_b_=caiying2007_b_.replace("零万","万")
caiying2007_b_=caiying2007_b_.replace("零亿","亿")
caiying2007_b_=caiying2007_b_.replace("零元","元")
}
//金额不小于1元
//else caiying2007_b_="零元"//金额小于1元显示"零元"
else caiying2007_b_="";//金额小于1元不显示"零元"
//获取小数并转换大写
if (x.toString().split(".")[1]){
var caiying2007_a=x.toString().split(".")[1].split("")
//caiying2007_a[0]=caiying2007_s[parseInt(caiying2007_a[0])]+caiying2007_ap[0];//显示“零角”
caiying2007_a[0]=(parseInt(caiying2007_a[0])==0)?"":caiying2007_s[parseInt(caiying2007_a[0])]+caiying2007_ap[0];//不显示“零角”
if (caiying2007_a[1])caiying2007_a[1]=(parseInt(caiying2007_a[1])==0)?caiying2007_ap[1]:caiying2007_s[parseInt(caiying2007_a[1])]+caiying2007_ap[1]
else caiying2007_a[1]="正"
caiying2007_a_=caiying2007_a.join("")
}
else caiying2007_a_="正"
//合并整数小数
var caiying2007=caiying2007_b_+caiying2007_a_
return caiying2007
}
</SCRIPT>
</head>
...全文
1740 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
epoecq 2013-03-02
  • 打赏
  • 举报
 回复
所列代码都不太理想，看样子是混用了多个代码片断造成不兼容引起某些功能失效。所以不打算用了。不过，这些代码中，zzgzzg00 所提出的还是值得谈讨的。不过，因答案都不尽人意，也没有人提出更好的解决方案，所以就不用了。此题的分就给zzgzzg00 老师了。谢谢。此贴已结，用户就看具体情况试用各位所提出的解决方案吧。
swjtueducn2 2013-02-28
  • 打赏
  • 举报
 回复
引用 7 楼 swjtueducn2 的回复:
其实你使用text-align样式就可以了，只是你加的地方不正确而已。下面是一个例子： XML/HTML code?12345678 <div align="center"> <select id="amount22" style="text-align:center;"> ……
忽略掉，只是在火狐下测试的
swjtueducn2 2013-02-28
  • 打赏
  • 举报
 回复
其实你使用text-align样式就可以了，只是你加的地方不正确而已。下面是一个例子： 

    <div align="center">                          
          <select id="amount22" style="text-align:center;">
              <option value="0">请选择</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
          </select>
    </div>
epoecq 2013-02-28
  • 打赏
  • 举报
 回复
请用代码的形式表示一下，我试试看。
Go 旅城通票 2013-02-26
  • 打赏
  • 举报
 回复
option在IE下设置text-align:center没有用，一定要居中只能用div来模拟了
epoecq 2013-02-26
  • 打赏
  • 举报
 回复
经测试，zzgzzg00 老师的代码中用css设置对此表单的input部分有效。S_Evanescence老师所提的属常用的，早已试过。不起作用。zzgzzg00的代码，对select部分仍未起作用。不过，此问题通过笨方法（加 ）可以解决。只是这样做有点不好。问题虽能解决，但这样做不合编程规则。谁有更好的，规范的代码呢？网上的这此，都是非实用的代码，只能用来讨论交流。 两位老师可以把一、二楼的代码复制到记事本上，把TXT改为HTML并用IE打开看看，然后改改代码，成功后把所改的部分用红色显示的方式把成功的代码发一下。 结贴等一段时间办，看看哪个高手能提出更简洁的解决方案。
S_Evanescence 2013-02-25
  • 打赏
  • 举报
 回复
<td align="center"> <input style="text-align:center">
似梦飞花 2013-02-25
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> input[type="text"]{ text-align:center; } select{ text-align:center; } </style> </head> <body> <input type="text"> <select> <option>1</option> </select> </body> </html> 用css设置试试可以不
epoecq 2013-02-25
  • 打赏
  • 举报
 回复
<body> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><table width="724" border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC" style="border-collapse: collapse"> <tr bgcolor="#F0F0F0"> <td colspan="2"><table width="718"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="40"><div align="center" class="S_bt">表格</div></td> </tr> <tr> <td><div align="center"> <table width="400" height="1" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#666666"></td> </tr> </table> </div></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>　</td> </tr> </table> <table width="724" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"> <tr> <td colspan="2"><form name="form1"><table width="724" border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC" style="border-collapse: collapse" class="texts"> <tr bgcolor="#F8ECB4"> <td width="30" height="20"><input type="checkbox" name="checkall" onClick="check_all(this)" ></td> <td width="30" height="20"><div align="center"><strong>序号</strong></div></td> <td width="187"><div align="center"><strong>货品编码</strong></div></td> <td width="187"><div align="center"><strong>货品名称</strong></div></td> <td width="97"><div align="center"><strong>数量</strong></div></td> <td width="97"><div align="center"><strong>单价</strong></div></td> <td width="99"><div align="center"><strong>金额</strong></div></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="724" border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC" style="border-collapse: collapse" class="doublecolortable" id="amount_price_total"> <tr> <script language="JavaScript"> function check_all(obj){ for(i=0;i<document.getElementsByName("c").length;i++){ document.getElementsByName("c")[i].checked=obj.checked; } } </script> <td width="30" height="20"><input type="checkbox" name="c" /></td> <td width="30" height="20"><div align="center">1</div></td> <td width="187"><input name="textfield33" type="text" class="input_1"></td> <td width="187"><input name="textfield322" type="text" class="input_1"></td> <td width="97"><div align="center"> <select id="amount12"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div></td> <td width="97"><div align="center"> <input name="price12" type="text" class="input_2" id="price12" size="10" value="25"> </div></td> <td width="99"><div align="center"> <input name="total12" type="text" class="input_2" id="total12" size="10"> </div></td> </tr> <tr> <script language="JavaScript"> function check_all(obj){ for(i=0;i<document.getElementsByName("c").length;i++){ document.getElementsByName("c")[i].checked=obj.checked; } } </script> <td width="30" height="20"><input type="checkbox" name="c" /></td> <td height="20"><div align="center">2</div></td> <td><input name="textfield33" type="text" class="input_1"></td> <td><input name="textfield322" type="text" class="input_1"></td> <td><div align="center"> <select id="amount22"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div></td> <td><div align="center"> <input name="price22" type="text" class="input_2" id="price22" size="10" value="25"> </div></td> <td><div align="center"> <input name="total22" type="text" class="input_2" id="total22" size="10"> </div></td> </tr> <tr> <script language="JavaScript"> function delRow(){ window.event.srcElement.parentNode.parentNode.parentNode.removeChild(window.event.srcElement.parentNode.parentNode); } //删除所有数据行 function delAllRows(){ var rowParent = document.getElementById("mytab").childNodes[1]; var rows = rowParent.rows; for(var i=rows.length-1;i>=0;i--){ rowParent.removeChild(rows[i]); } } </script> </tr> <td><input type="button" name="delete_button" style="font-size:20px; width: 85px; height: 30px;" value="删   除" onclick="deleteAll('c');"></td> <tr> <td height="20" colspan="6"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>合计人民币大写：<span id="tt"></span> </td> </tr> </table></td> </tr> </table></td> </tr> </table> </form></td> </tr> </table></td> </tr> </table> </body>
html select文字居中显示,用CSS将select/option文本居中
0123456789101112131415css :select {width: 70px;height: 37px;padding: 0 0 0 20px;}或者select {width: 70px;height: 37px;text-align: center;...}设置select，option文本居中设置select,option文本居中 可...
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.由于无法修改原生select中的option样式，因此自己通过ul，li实现下拉列表，用input实现回显框； input实现select回显注意2个地方： 1）使用 readonly=“readonly” 让input框无法实现输入 ，不获取焦点； <...
＜select＞下拉选择框
下拉菜单<select>项，分组: <select name=”course”> <option>课程选择</option> <optgroup label=”1.DOM基础”> <option value=”1.1”>1.1文档树</option> <...
html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
提交的时候，如果没有给option设置value属性，提交的就是option标签之间的文本，但如果设置了option的value属性，提交的就是value的值。虽然在用户看来和之前使用div没有区别，但带语义的标签可以增加代码的可读性，...
CSS之文本框样式和水平居中
文章目录1 CSS使用1.1 文本框样式1.1.1 鼠标一上去变成浅绿色1.1.2 文本框提示样式，鼠标点击获得焦点时提示内容消失1.1.3 input文本框样式1.1.4 只有下划线的文本框1.1.5 软件序列号式的输入框1.1.6 输入框景背景...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章