在vs2008平台下javascript里document.write()表格td样式输出不显示

在vs2008平台下javascript里document.write()表格td样式输出不显示,第1张

是javascript 转义字符的问题

\' 单引号

documentwrite ("<td style='border:none;'></td>");应该是

documentwrite ("<td style=\'border:none;\'></td>");

方法一:最原始的方法,创建一一元素

 var a1=documentcreateElement("table");

 var a2=documentcreateElement("tbody");

 var a3=documentcreateElement("tr");

 var a4=documentcreateElement("td");

 //开始appendchild()追加各个元素

 a3appendChild(a4);

 a2appendChild(a3);

 a1appendChild(a2);

方法二:利用table对象里面含有的函数:插入行和插入列

var tabNode=documentcreateElement("table");

var trNode=tabNodeinsertRow();

var tdNode=trNodeinsertCell;

tabNodeinnerHTML="这是采用table对象里面的函数创建的"

注意:利用原始方法,一个个createElement时候,必须要添加一个tbody对象

动态的创建和删除:

创建表格,通过输入的值:

function createTable() {

    tableNode = documentcreateElement("table"); //获得对象   

    tableNodesetAttribute("id", "table")

    var row = parseInt(documentgetElementsByName("row1")[0]value); //获得行号 

    //alert(row);   

    if (row <= 0 || isNaN(row)) {

        alert("输入的行号错误,不能创建表格,请重新输入:");

        return;

    }

    var cols = parseInt(documentgetElementsByName("cols1")[0]value);

    if (isNaN(cols) || cols <= 0) {

        alert("输入的列号错误,不能创建表格,请重新输入:");

        return;

    }

    //上面确定了 现在开始创建  

    for (var x = 0; x < row; x++) {

        var trNode = tableNodeinsertRow();

        for (var y = 0; y < cols; y++) {

            var tdNode = trNodeinsertCell();

            tdNodeinnerHTML = "单元格" + (x + 1) + "-" + (y + 1);

        }

    }

    documentgetElementById("div1")appendChild(tableNode); //添加到那个位置 

}

删除行:

function delRow() {

    //要删除行,必须得到table对象才能删除,所以在创建的时候必须要设置table对象的 id 方便 *** 作 

    var tab = documentgetElementById("table"); //获得table对象  

    if (tab == null) {

        alert("删除的表不存在!")

        return;

    }

    var rows = parseInt(documentgetElementsByName("delrow1")[0]value); //获得要删除的对象  

    if (isNaN(rows)) {

        alert("输入的行不正确。请输入要删除的行。。。");

        return;

    }

    if (rows >= 1 && rows <= tabrowslength) {

        tabdeleteRow(rows - 1);

    } else {

        alert("删除的行不存在!!");

        return;

    } 

}

删除列:

//删除列要麻烦些, 要通过行来进行删除   

// 一行的cells的长度就是列的个数   

//tabrows[x]deleteCell(cols-1)

function delCols() {

    //获得table对象  

    var tab = documentgetElementById("table");

    if (tab == null) {

        alert("删除的表不存在!!");

        return;

    }

    //获得文本框里面的内容    

    var cols = parseInt(documentgetElementsByName("delcols1")[0]value);

    //检查是否可靠   

    if (isNaN(cols)) {

        alert("输入不正确。请输入要输出的列。。");

        return;

    }

    if (!(cols >= 1 && cols < tabrows[0]cellslength)) {

        alert("您要删除的行不存在!!");

        return;

    }

    for (var x = 0; x < tabrowslength; x++) {//所有的行  

        tabrows[x]deleteCell(cols - 1);

    } 

}

// 你的 HTML 的 body 中添加如下内容

// 一个 div 用来放生成的 table ; 一个按钮执行 create

// <div id="div"></div>

// <input type="button" onclick="create()" />

// 以下是 js 方法

<script src="http://ajaxgoogleapiscom/ajax/libs/jquery/142/jqueryminjs" type="text/javascript"></script>

<script type="text/javascript">

function create() {

// 使用 $("<table></table>") 生成一个 table

var tab = $("<table border='1'></table>");

// 3 行循环3次

for (var i = 1; i <= 3; i++) {

// 每次生成一个 <tr></tr>

var row = $("<tr></tr>");

// 4 列循环 4 次

for (var j = 1; j <= 4; j++) {

// 给 <tr></tr> append(添加) <td>i行j列</td>

rowappend($("<td>" + i + "行" + j + "列" + "</td>"));

}

// 给 <table></table> 每次循环添加上边的 <tr></tr>

tabappend(row);

}

// 最后把生成的 <table></table> 放到 id=div 的控件中

$("#div")append(tab);

}

</script>

js是无法直接修改css文件的,但可以通过取对象的方式修改对象的样式,通常有两种方法:\x0d\1、改变className,但首先在样式表中预设定样式类。\x0d\例如:documentgetElementById('obj')className='';\x0d\2、改变cssText。\x0d\例如:documentgetElementById('obj')styleheight='100px';

function

addRow(){

//添加一行

var

newTr

=

testTblinsertRow();

//添加两列

var

newTd0

=

newTrinsertCell();

var

newTd1

=

newTrinsertCell();

//设置列内容和属性

newTd0innerHTML

=

'';

newTd2innerText=

'新加行';

}

你自己 *** 作,20次行,5次列,就行了

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/12179011.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-21
下一篇2023-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存