<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<style>
* {
margin: 0
padding: 0
}
.wrap {
margin: 20px auto
width: 600px
}
table {
width: 600px
border: 1px solid black
border-collapse: collapse
}
table input[type=button] {
width: 50px
height: 25px
border: 0
cursor: pointer
}
table input[type=button]:hover {
background-color: #fd3
}
table input[type=text] {
border-color: black
border-width: 0 0 1px 0
text-align: center
}
table textarea {
width: 90%
height: 100px
resize: none
}
th,td {
border: 1px solid black
text-align: center
}
</style>
<script>
var addRow = function(btn) {
var tbody = table.tBodies[0]
var row = btn.parentElement.parentElement.rowIndex
if (btn.value == '-') {
tbody.deleteRow(row)
} else {
var tr = tbody.insertRow(tbody.rows.length - 1)
var arr = [
"<select><option>城际交通费</option></select>",
"<input type='text' onkeyup='calc(this)' name='je' />",
"<input type='text' />",
"<input type='button' value='+' onclick='addRow(this)' />"
]
for (var i = 0 i < 4 i++) {
var td = tr.insertCell(tr.cells.length)
td.innerHTML = arr[i]
}
btn.value = '-'
}
}
var calc = function (txt){
if(!/^[+-]?((\d+(\.\d*)?)|(\d*\.\d+))$/.test(txt.value)) {
txt.value = txt.value.replace(/[^\+\-\.\d]/g, "")
}
var jes = document.getElementsByName("je")
var sum = 0
for(var i = 0 i < jes.length i++) {
sum += parseFloat(jes[i].value)
}
zje.value = sum
}
onload = function (){
dt.value = new Date().toLocaleString()
}
</script>
</head>
<body>
<div class="wrap">
<table id="table">
<tbody>
<tr>
<td>填写人：</td>
<td>
<input type="text" value="双q将" />
</td>
<td>填报时间：</td>
<td>
<input type="text" value="" id="dt" readonly />
</span>
</td>
</tr>
<tr>
<td>总金额：</td>
<td>￥
<input type="text" id="zje" readonly />
</td>
<td>状态：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<th>项目</th>
<th>金额</th>
<th>费用说明</th>
<th> *** 作</th>
</tr>
<tr>
<td>
<select>
<option>城际交通费</option>
</select>
</td>
<td>
<input type="text" onkeyup="calc(this)" name="je" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="+" onclick="addRow(this)" />
</td>
</tr>
<tr>
<td>事由：</td>
<td colspan=3>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
①。html有点错，radio的name相同，id不能相同，②。如果value的值分别写为0和1，要写进表格的值为男和女的话，那么js中还要在判断下
③。如果要在当勾选了复选框后，“删除选中的行”按钮启用，没打勾就一直禁用的话，那js中还得加点内容。
利用楼上的那位改的：
<script type="text/javascript">
function buttonDisplay(){
document.getElementById('del').disabled=false
}
function AddAction()
{
var _table=document.getElementById("studentList")
var _tr=_table.insertRow(-1)
var _td=new Array(5)
for(var i=0i<_td.lengthi++)
{
_td[i]=_tr.insertCell(-1)
}
_td[0].innerHTML="<input type='checkbox' name='ck' value='' onclick='buttonDisplay()'/>"
_td[1].innerHTML=_tr.rowIndex
_td[2].innerHTML=document.getElementById("studentName").value
_td[3].innerHTML=document.getElementById("studentAge").value
var gender = document.getElementsByName('studentSex')
var selectedGenderValue = ''
for(var i = 0i<gender.lengthi++){
if(gender[i].checked){
if(gender[i].value == 1) {
selectedGenderValue = '男'
}else if(gender[i].value == 0){
selectedGenderValue = '女'
}
}
}
_td[4].innerHTML = selectedGenderValue
}
function TableDel()
{
var _table=document.getElementById("studentList")
var cks=document.getElementsByName("ck")
for(var i=cks.length-1i>=0i--)
{
if(cks[i].checked){
_table.deleteRow(cks[i].parentNode.parentNode.rowIndex)
document.getElementById('del').disabled="true"
}
}
}
</script>
思路：获取行对象→获取列对象→使用innerHTML为单元格添加超链接内容，实例演示如下：
1、HTML结构
<table id = "test"><tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
</table>
第<input type="text" id="row">行第<input type="text" id="col">列<input type='button' value='确定' onclick="fun()"/>
2、javascript代码
function fun(){row = document.getElementById("row").value - 1
col = document.getElementById("col").value - 1
tr = document.getElementById("test").getElementsByTagName("tr")
td = tr[row].getElementsByTagName("td")[col]
td.innerHTML = "<a href='#'>超链接</a>"
}
3、效果演示
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）