2013年4月2日星期二开发问题笔记

时间:2021-05-04 19:42:34

记录下今天开发过程中遇到的一些问题:

1.div,iframe的滚动条问题

困扰我大半个上午,网上搜索各种解决方法,都没成功,最终实践结论是:1)iframe滚动条除了在iframe属性scrolling设置成yes后要出现滚动条还必须在对应src的body标签中加入style=overflow:auto;2)div滚动条显示只要div内容超过div本身的宽或高,并且设置style=overflow:auto,则div中内容超出时会自动出现滚动条(今天花费1个多小时没出现是因为div引用的css名称我写错了,而因为思维定势我居然没仔细对应div引用的css名称,在div里引用了一个不存在的css名称;而直接想尽各种方法调整该css及里面table的属性都不成功,实在很惭愧);同时发现一直觉得前端没什么技术含量的想法是很错误的,前端要做好很不容易,除了要深入里面大部分都一知半解的一些属性外,写代码时还要格外小心,否则出错很难调试。

2.JS动态生成表格问题,下面文章总结很好

JS动态创建表格

目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 (转别人的)

方法一:使用createElement生成表格,使用insertRowinsertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。

方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。

方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串

方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。

方法

运行时间(ms)

方法一

93037

方法二

3341

方法三

2795

方法四

500

<html>
<head>
<title>test page</title>
<script type='text/javascript'>
<!--
function createTable() {
var t = document.createElement('table');
for (var i = 0; i < 2000; i++) {
var r = t.insertRow();
for (var j = 0; j < 5; j++) {
var c = r.insertCell();
c.innerHTML = i + ',' + j;
}
}

document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}

function createTable2() {
var t = document.createElement('table');
var b = document.createElement('tbody');
for (var i = 0; i < 2000; i++) {
var r = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var c = document.createElement('td');
var m = document.createTextNode(i + ',' + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}

t.appendChild(b);
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}

function createTable3() {
var data = '';

data += '<table border=1><tbody>';
for (var i = 0; i < 2000; i++) {
data += '<tr>';
for (var j = 0; j < 5; j++) {
data += '<td>' + i + ',' + j + '</td>';
}
data += '</tr>';
}
data += '</tbody><table>';

document.getElementById('table1').innerHTML = data;
}

function createTable4() {
var data = new Array();

data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');

document.getElementById('table1').innerHTML = data.join('');
}

function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1);
}
//-->
</script>
</head>
<body>
<div id="table1" style="border: 1px solid black">
</div>

<script>
showFunctionRunTime(createTable);
showFunctionRunTime(createTable2);
showFunctionRunTime(createTable3);
showFunctionRunTime(createTable4);
</script>
</body>
< /html>

但采用第4中方法建表格时出现Javascript在IE下设置innerHTML时出现未知的运行时错误:知道在IE下不能直接给<table><tr>标签的innerHTML赋值,最后对最外层div赋值解决

<script>
document.getElementById("trone").innerHTML = "<td>haha</td>";
</script>
<tr id="trone">
</tr>

IE中用js改变table的innerHTML属性报"未知的运行时错误"

在用 Javascript 更改 HTML 代码的时候,经常会用到某个对象的 innerHTML。在读写标签内的代码或字符串时非常方便。

但 IE 对这个属性的支持不太好,经常容易报出 "未知的运行时错误",而同样的操作,在 FireFox 和 Opera 下面就都没问题。

到百度和 Google 查了下,发现是 IE 浏览器下,对 <table>、<tbody> 和 <tr> 等标签的 innerHTML 属性进行写操作时会报错。

应该是 IE 处理不当造成的。

目前没有很好的解决办法,只能采取改变 HTML 结构的方式,也就是说,不要对 <table> 等标签应用这个属性,改为对 <div>、<span> 和 <p> 等标签,就没问题了。

3.JS中用到的字符串方法

js的join()与 split()

数组的一些方法:

1.join()split()方法
<script type="text/javascript">
var x;
var a=new Array();
a[0]="XHTML";
a[1]="CSS";
a[2]="JavaScript";
alert(a.join());
alert(typeof(a.join));
alert(typeof(a));
< /script>
join()
方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。
指定分隔符方法join("#");其中#可以是任意

与之相反的是split()方法:用于把一个字符串分割成字符串数组.
stringObject.split(a,b)
这是它的语法
a
是必须的决定个从a这分割
b
不是必须的,可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

注意返回的数组中不包括a本身;
提示和注释
注释:如果把空字符串 ("") 用作 a,那么 stringObject 中的每个字符之间都会被分割。

注释:String.split() 执行的操作与 Array.join 执行的操作是相反的。

看例子
<script type="text/javascript">
var str="how are you?";
document.write(str.split("")+"<br />");
document.write(str.split(" ")+"<br />");
document.write(str.split("",3)+"<br />");
< /script>
返回
h,o,w, ,a,r,e, ,y,o,u,?
how,are,you?
h,o,w

一下两种可以把句子分割成单词
var words = sentence.split(' ')
或者使用正则表达式作为 a

var words = sentence.split(//s+/)

jssubstringsubstr的用法

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置,从零开始的索引

参数 描述
start
必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop
可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop start

说明

substring
方法返回的子串包括 start 处的字符,但不包括 end 处的字符。
如果 start end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
如果 start end 大,那么该方法在提取子串之前会先交换这两个参数。
如果 start end 为负数,那么它将被替换为 0

2.substr 方法

定义和用法

substr
方法用于返回一个从指定位置开始的指定长度的子字符串。

语法

stringObject.substr(start [, length ])

参数 描述
start
必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0
length
可选。在返回的子字符串中应包括的字符个数。

说明

如果start为负数,则start=str.length+start
如果 length 0 或负数,将返回一个空字符串。
如果没有指定该参数,则子字符串将延续到stringObject的最后。

4. JavaScript TableTableRowTableCell属性、方法、事件

Table表格对象:表示HTML文档中表,对于文档中每个<table>标记,浏览器都创建一个Table对象.

Table对象集合

集合

描述

cells[]

获取包含表格中所有单元格数组

rows[]

获取包含表格中所有行数组

tBodies[]

获取包含表格中所有tbody数组

Table对象属性

border

设置或获取表格边框

caption

设置或获取表格标题

cellPadding

设置或获取每个单元格边框与内容宽度

cellSpacing

设置或获取表格中单元格间距

frame

设置或获取表格具有哪些边框

rules

设置或获取表格中内部边框

summary

设置或获取表格描述

tFoot

获取表格tFoot对象

tHead

获取表格tHead对象

width

设置或获取表格宽度

Table对象方法

createCaption()

为表格创建一个空标题元素

createTFoot()

为表格创建一个空tFoot元素

createTHead()

为表格创建一个空tHead元素

deleteCaption()

删除表格标题元素

deleteRow()

删除指定表格行

deleteTFoot()

删除表格tFoot元素

deleteTHead()

删除表格tHead元素

insertRow()

向表格中插入新行

TableCell对象:表示HTML文档中表单元格,对于文档中每个<td>标记,浏览器都创建一个TableCell对象.

TableCell对象属性

属性

描述

abbr

设置或获取单元格摘要

align

设置或获取单元格中文字水平对齐方向

axis

设置或获取以逗号分隔相关单元格组成列表

cellIndex

获取行单元格集合中某单元格位置

ch

设置或获取单元格对齐特征

chOff

设置或获取单元格对齐偏移特征

colSpan

设置或获取单元格跨越表格列数

headers

设置或获取以空格分表头单元格id列表

height

设置或获取单元格高度

innerHTML

设置或获取单元格标记间HTML文本

noWrap

设置或获取单元格是否自动换行

rowSpan

设置或获取单元格跨越表格行数

scope

设置或获取与标题相关联数据列

vAlign

设置或获取单元格文字垂直对齐方向

width

设置或获取单元格宽度

TableRow对象:表示HTML文档中表行,对于文档中每个<tr>标记,浏览器都创建一个TableRow对象.

TableRow对象集合

集合

描述

cells[]

获取表格行中所有列组成数组

Table对象属性

accessKey

设置或获取该对象快捷键

align

设置或获取表格行中单元格中文字水平对齐方向

chOff

设置或获取单元格对齐偏移特征

colSpan

设置或获取单元格跨越表格列数

height

设置或获取表格行高度

innerHTML

设置或获取表格行标记间HTML文本

innerText

设置或获取表格行标记间文本

rowIndex

获取表格行对象在表格行集合中位置

sectionRowIndex

获取tBodytHeadtFoot中,表格行对象在行集合中位置

tabIndex

设置或获取表格行Tab顺序索引

vAlign

设置或获取表格行中文字垂直对齐方向

width

设置或获取表格行宽度

TableRow对象方法

blur()

取消该对象激活状态

click()

模拟鼠标单击该对象

deleteCell([i])

删除表格行中指定单元格

focus()

将焦点移至表格行

insertCell()

在表格行中插入新单元格

表格行的数组:tablet.rows
行中的单元格数组:tablet[i].cells
取单元格的innerHTML属性就能取到内容了。

5. javascript innerHTML、outerHTML、innerText、outerText的区别

今天操作表格时想取当前结点包含标签的元素,一开始想到innerHTML不行,问同事才知道可以用outerHTML(注意大小写不能写错,否则引用这个属性时JS不会报错,影响结果)

今天想去td标签的值一开始用value报错后才知道要用innerText

1、功能讲解:
innerHTML
设置或获取位于对象起始和结束标签内的 HTML
outerHTML
设置或获取对象及其内容的 HTML 形式
innerText
设置或获取位于对象起始和结束标签内的文本
outerText
设置(包括标签)或获取(不包括标签)对象的文本
2
、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"
宋体";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>
设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>
设置或获取位于对象起始和结束标签内的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>
设置或获取对象及其内容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>
设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML
效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText
效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML
效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText
效果.</li>
</ul>
</body>
</html>
3
、不同之处:
简单的说innerHTMLouterHTMLinnerTextouterText的不同之处在于:
1
)、innerHTMLouterHTML在设置对象的内容时包含的HTML会被解析,而innerTextouterText则不会。
2)
、在设置时,innerHTMLinnerText仅设置标签内的文本,而outerHTMLouterText设置包括标签在内的文本。
2013年4月2日星期二开发问题笔记
特别说明:
  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">
HTML,符合W3C标准</a>

6.JS设置复选框选中

获取到需要的checkbox之后只需设置其checked属性为true就行了。如:
document.getElementById("chk1").checked = true;

checkboxArr[1].checked = true;

开始把true写成了True不能正常执行

7.IE下table强制不换行

table{width:100%;border:1px solid #999;}
table td{word-break: keep-all;}

这在IE下可以用,但是在FireFoxChrome下是无法达到预期效果的。