javascript怎么实现动态填充html里table里的内容呢？

刚刚被领导逼着弄公司里的嵌入式WEB维护，现在在自学javascript，

7 个解决方案

#1

引用楼主 li875590079 的回复:

刚刚被领导逼着弄公司里的嵌入式WEB维护，现在在自学javascript，

刚刚不小心按到了ENTER键，问题没说完就发布了，现在我的代码如下

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

专家们能知道一下吗？为什么我的按钮点击时无效呢

#2

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

#3

引用 1 楼 li875590079 的回复:

Quote: 引用楼主 li875590079 的回复:

刚刚被领导逼着弄公司里的嵌入式WEB维护，现在在自学javascript，

刚刚不小心按到了ENTER键，问题没说完就发布了，现在我的代码如下

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

专家们能知道一下吗？为什么我的按钮点击时无效呢

JS代码没有写在function里。LZ的写法是页面加载时执行。要使点击生效，应该写function



function setTd() {

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

}

#4

引用 2 楼 fdipzone 的回复:

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

大侠，你执行后是可以的吗，能介个图给我看看啊，我这里怎么测试不行啊，而且现在还是乱码，我这个是在IE里执行的哦

#5

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>

 

<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>

 

</table>

 

 

<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	var setTd = function(){

		document.getElementById('table1').rows[1].cells[0].innerHTML="2013-08-08";

	}

    //-->

</script>

 

<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">

 

 

</body>

</html>

参考下

#6

引用 5 楼 calmcrime 的回复:

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>

 

<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>

 

</table>

 

 

<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	var setTd = function(){

		document.getElementById('table1').rows[1].cells[0].innerHTML="2013-08-08";

	}

    //-->

</script>

 

<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">

 

 

</body>

</html>

参考下

呵呵可以了，真是太菜了，以前搞c c++的刚刚接触这个！

#7

引用 4 楼 li875590079 的回复:

Quote: 引用 2 楼 fdipzone 的回复:

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

大侠，你执行后是可以的吗，能介个图给我看看啊，我这里怎么测试不行啊，而且现在还是乱码，我这个是在IE里执行的哦

因為我加了<meta http-equiv="content-type" content="text/html; charset=utf-8">
去掉就可以了。，不過樓上已經給出方案，用row[1]代替row(0)可以兼容不同瀏覽器了。

#1

引用楼主 li875590079 的回复:

刚刚被领导逼着弄公司里的嵌入式WEB维护，现在在自学javascript，

刚刚不小心按到了ENTER键，问题没说完就发布了，现在我的代码如下

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

专家们能知道一下吗？为什么我的按钮点击时无效呢

#2

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

#3

引用 1 楼 li875590079 的回复:

Quote: 引用楼主 li875590079 的回复:

刚刚被领导逼着弄公司里的嵌入式WEB维护，现在在自学javascript，

刚刚不小心按到了ENTER键，问题没说完就发布了，现在我的代码如下

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

专家们能知道一下吗？为什么我的按钮点击时无效呢

JS代码没有写在function里。LZ的写法是页面加载时执行。要使点击生效，应该写function



function setTd() {

    document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

}

#4

引用 2 楼 fdipzone 的回复:

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

大侠，你执行后是可以的吗，能介个图给我看看啊，我这里怎么测试不行啊，而且现在还是乱码，我这个是在IE里执行的哦

#5

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>

 

<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>

 

</table>

 

 

<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	var setTd = function(){

		document.getElementById('table1').rows[1].cells[0].innerHTML="2013-08-08";

	}

    //-->

</script>

 

<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">

 

 

</body>

</html>

参考下

#6

引用 5 楼 calmcrime 的回复:

<!DOCTYPE html>

<html>

<head>

    <title>this is a test web</title>

</head>

<body>

 

<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>

 

</table>

 

 

<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	var setTd = function(){

		document.getElementById('table1').rows[1].cells[0].innerHTML="2013-08-08";

	}

    //-->

</script>

 

<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">

 

 

</body>

</html>

参考下

呵呵可以了，真是太菜了，以前搞c c++的刚刚接触这个！

#7

引用 4 楼 li875590079 的回复:

Quote: 引用 2 楼 fdipzone 的回复:

1.你的程序只能在IE运行
2.按钮点击无效，是因为onclick="setTd()" setTd这个方法没有

修改如下:使用IE，点击读取，rtu这个位置会更新为2013-08-08



<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>this is a test web</title>

</head>

<body>


<h4 align="center">事件记录</h4>

<table id="table1" width="600" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse" align="center">

    <tr>

        <th>时间</th>

        <th>设备</th>

        <th>事项</th>

    </tr>

    <tr>

        <td>2013-09-09</td>

        <td>rtu</td>

        <td>reboot</td>

    </tr>


</table>



<!-- This is a comment start -->

<script type="text/javascript">

    <!--

	function setTd(){

	document.getElementById('table1').rows(1).cells(1).innerHTML="2013-08-08";

	}

    //-->

</script>


<!-- This is a comment end -->

<input type="button" value="读取" onclick="setTd()">



</body>

</html>

大侠，你执行后是可以的吗，能介个图给我看看啊，我这里怎么测试不行啊，而且现在还是乱码，我这个是在IE里执行的哦

因為我加了<meta http-equiv="content-type" content="text/html; charset=utf-8">
去掉就可以了。，不過樓上已經給出方案，用row[1]代替row(0)可以兼容不同瀏覽器了。

秒客网

javascript怎么实现动态填充html里table里的内容呢？

7 个解决方案

#1

#2

#3

#4

#5

#6

#7

#1

#2

#3

#4

#5

#6

#7

相关文章