js对表格行进行操作.获取单元格的值等

这篇博客展示了如何使用JavaScript动态地在HTML表格中添加和删除行。通过`insertRow`和`deleteRow`函数,可以实现表格内容的增删。此外,还包含获取单元格内容的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

code1

<script>
var j=0
function add_row(){
j++
 //j=sqd.rows.length;
 newRow=document.all.sqd.insertRow(-1)
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML=j
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=SerialNumber type=radio value="+j+">"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=SerialNumber1 type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=ProductName type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=jianshu type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Quantity type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=GrossWeight type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=CountWeight type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=UnitPrice type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Amount type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=CustOrder type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Discription type=text class=INPUT1 size=3>"
}
function del_row() {
for(i=1;i<sqd.rows.length;i++){
alert(sqd.rows(i).cells[1].interHTML)
}
}
</script>
<table id="sqd" width="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
              <tr bgcolor="#BAC2DA">
                <td height="25"> <div align="center">序号</div></td>
                <td> <div align="center">选中</div></td>
                <td> <div align="center">货物编号</div></td>
                <td> <div align="center">货物品名</div></td>
                <td> <div align="center">件数</div></td>
                <td> <div align="center">数量</div></td>
                <td> <div align="center">毛重</div></td>
                <td> <div align="center">计货重量</div></td>
                <td> <div align="center">费率</div></td>
                <td> <div align="center">金额</div></td>
                <td> <div align="center">客户定单号</div></td>
                <td> <div align="center">备注</div></td>
              </tr>
             </table>
            <br/> <input name="Submit5" type="button" onClick=add_row() class="button" value=" 添 加 ">
            <input name="Submit33" onclick=del_row() type="button" class="button" value=" 替换  ">
            <input type=button onclick="alert(sqd.rows[sqd.rows.length - 1].cells[0].innerText)" value="Get Value">

code2

<script>
//The JavaScript Source!! http://smallrain.net
var j=0
function add_row(){
 k=j+1
 j=sqd.rows.length;
 newRow=document.all.sqd.insertRow(-1)
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML=j
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Number type=radio >"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=SerialNumber type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=ProductName type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=PieceNo type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Quantity type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=GrossWeight type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=CountWeight type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=UnitPrice type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Amount type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=CustOrder type=text class=INPUT1 size=3>"
 newcell=newRow.insertCell()
 newcell.style.backgroundColor='#f7f7f7'
 newcell.innerHTML="<input name=Description type=text class=INPUT1 size=3>"
}
function del_row() {
 if(sqd.rows.length==1) return;
 var checkit = false
 for (var i=0;i<document.all.Number.length;i++) {
   if (document.all.Number[i].checked) {

   checkit=true;
   sqd.deleteRow(i)
   break;
   }
 }

 if (checkit) {

  for(i=1;i<sqd.rows.length;i++){
  sqd.rows[i].cells[0].innerText=i
 }


 } else
 {
 alert("请选择一个要删除的对象");
 return false}

}
</script>
<table width=90% border=0 align="center" cellpadding=2 cellspacing=1 bgcolor="#FFFFFF">
  <tr>
    <td height="25" class="table1">
      <div align="center"><font color="#FFFFFF"><strong>≡≡≡ 货 运 单 概 要 ≡≡≡</strong></font></div></td>
  </tr>
  <tr>
    <td align=center valign=top bgcolor=f7f7f7><table id="sqd" width="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
        <tr bgcolor="#BAC2DA">
          <td height="25">
            <div align="center">序号</div></td>
          <td>
            <div align="center">选中
                <input name=Number type=hidden >
          </div></td>
          <td>
            <div align="center">货物编号</div></td>
          <td>
            <div align="center">货物品名</div></td>
          <td>
            <div align="center">件数</div></td>
          <td>
            <div align="center">数量</div></td>
          <td>
            <div align="center">毛重</div></td>
          <td>
            <div align="center">计货重量</div></td>
          <td>
            <div align="center">费率</div></td>
          <td>
            <div align="center">金额</div></td>
          <td>
            <div align="center">客户定单号</div></td>
          <td>
            <div align="center">备注</div></td>
        </tr>
      </table>
        <br>
        <input name="Submit5" type="button" onClick=add_row() class="button" value=" 添 加 ">
        <input name="Submit33" onclick=del_row() type="button" class="button" value=" 删 除 ">
    </td>
  </tr>
</table>


code3

 <html>
<head>
<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
<script>
function start() {
//获取body标签
var mybody = document.getElementsByTagName("body")[0];
// 创建一个<table>元素和一个<tbody>元素
table1     = document.createElement("table");
mytablebody = document.createElement("tbody");
//创建所有的单元格
myArray = new Array('this','is','a','test');
for(var j = 0; j <4; j++) {
// 创建一个<tr>元素
    mycurrent_row = document.createElement("tr");
    for(var i = 0; i <4; i++) { 
 // 创建一个<td>元素--列
        mycurrent_cell = document.createElement("td");
  //创建一个文本节点
     if(j==0){
           currenttext = document.createTextNode(myArray[i]);
     }else if(i==0){
       currenttext = document.createTextNode(myArray[j]);
     }else {currenttext = document.createTextNode();
  }
        mycurrent_cell.appendChild(currenttext);
  // 将列<td>添加到行<tr>
        mycurrent_row.appendChild(mycurrent_cell);
    }
  // 将行<tr>添加到<tbody>
    mytablebody.appendChild(mycurrent_row);
}
// 将<tbody>添加到<table>
table1.appendChild(mytablebody);
//将<table>添加到<body>
mybody.appendChild(table1);
table1.setAttribute("border", "2");
table1.setAttribute("cellspacing", "3");//无效 ??
table1.setAttribute("cellpadding", "2");//无效  ??
}
</script>
</head>
<body onload="start()">
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值