js中cell（js中cellspacing）

发布时间：2023-12-08

js中cell（js中cellspacing）

更新： 2022-11-13 10:04

本文目录一览：

  1. javascript中cell的用法
  2. js如何获取表格中某一行的单元格数
  3. 谁能解释下这段js代码的意思
  4. js insertcell 怎么跨列
  5. js中cell可以显示单元格的内容，如果单元格是这样的,如何获得input里的值呢
  6. 帮忙解释一下这段javascript是什么意思？

javascript中cell的用法

返回大于等于其数字参数的最小整数。

Math.ceil(number)

必选项 number 参数是数值表达式。 说明：返回值为大于等于其数字参数的最小整数。

js如何获取表格中某一行的单元格数

javascript提供了获取表格中某一行单元格数的代码，参考如下：

document.getElementById('first').cells.length  // 获取id为first的行的单元格数目

实例演示如下： 创建Html元素：

<div class="box">
  <span>实例演示：获取表格第一行的单元格数量</span><br>
  <div class="content">
    <table>
      <tr id="first">
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
    <input type="button" value="获取表格第一行的单元格数量" onclick="fun_get()">
  </div>
</div>

简单设置一下css样式：

div.box {
  width: 300px;
  padding: 20px;
  margin: 20px;
  border: 4px dashed #ccc;
}
div.box span {
  color: #999;
  font-style: italic;
}
div.content {
  width: 250px;
  margin: 10px 0;
  padding: 20px;
  border: 2px solid #ff6666;
}
table {
  border-collapse: collapse;
}
td {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid green;
}

编写jquery代码：

function fun_get() {
  alert(document.getElementById('first').cells.length);
}

观察效果：

谁能解释下这段js代码的意思

secTable.cells.length 是table中cell（单元格）的个数 secTable.cells[n].className="sec2" 是给第n个cell的class属性赋值为"sec2" class属性应该是给css用的

js insertcell 怎么跨列

代码如下:

<!DOCTYPE html>
<html xmlns="">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title>
  <script type="text/javascript">
    var mailArr = [
      { "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },
      { "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" },
      { "title": "一个c问题", "name": "五五", "date": "2014-03-21" },
      { "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" }
    ];
    var tab = null;
    window.onload = function () {
      loadTab();
      // 全选
      document.getElementById("selA").onclick = function() {
        if (document.getElementById("selA").checked == true) {
          seleAll(tab, true);
        } else {
          seleAll(tab, false);
        }
      };
      // 删除所有的选中的
      document.getElementById("delSel").onclick = function() {
        // 遍历所有的input控件即可(除了最后一个全选用的checkbox)
        var chks = document.getElementsByTagName('input');
        for (var i = chks.length - 2; i >= 0; i--) {
          var chk = chks[i];
          if (chk.checked == true) {
            // 选中行删除处理
            var rowNow = chk.parentNode.parentNode;
            rowNow.parentNode.removeChild(rowNow);
          } else {
            alert("really");
          }
        }
      };
    };
    function loadTab() {
      tab = document.getElementById("tb");
      // 把mailArr循环遍历方式以tr的方式加入表格中
      for (var rowindex = 0; rowindex < mailArr.length; rowindex++) {
        var tr = tab.insertRow(tab.rows.length - 1); // 插入到末二行，最后一行要给全选那一行保留着
        var td1 = tr.insertCell(-1);
        td1.innerHTML = "<input type='checkbox'/>";
        var td2 = tr.insertCell(-1);
        td2.innerHTML = mailArr[rowindex].title;
        var td3 = tr.insertCell(-1);
        td3.innerHTML = mailArr[rowindex].name;
        var td4 = tr.insertCell(-1);
        td4.innerHTML = mailArr[rowindex].date;
      }
    }
    // 要使全选按钮生效，就要遍历所有的表格的行
    function seleAll(mailTab, isSel) {
      for (var i = 0; i < mailTab.rows.length; i++) {
        var tr = mailTab.rows[i];
        tr.cells[0].childNodes[0].checked = isSel;
      }
    }
  </script>
</head>
<body>
  <table id="tb" border="1" style="border-collapse: collapse;">
    <tr>
      <th>序列</th>
      <th>标题</th>
      <th>发邮人</th>
      <th>发件时间</th>
    </tr>
    <!-- 循环增加 -->
    <!-- 全选 -->
    <tr>
      <td colspan="4">
        <input id="selA" type="checkbox" /><label for="selA">全选</label>
        <a href="#" id="delSel">删除</a>
      </td>
    </tr>
  </table>
</body>
</html>

js中cell可以显示单元格的内容，如果单元格是这样的,如何获得input里的值呢

input 加个id就可以了，如：

<td><input type="text" id="t1"/></td>

然后js里用：

document.getElementById("t1").value

来取得input的值

帮忙解释一下这段javascript是什么意思？

解释内容见下面代码中的注释：

function doSubmit() {
  // 获取用户名（name = "userName" 的元素的值）
  var userName = document.getElementById("userName").value;
  // 获取用户密码（name = "userPass" 的元素的值）
  var userPass = document.getElementById("userPass").value;
  // 在 id="TableA" 的表格最下方插入一行
  var row = document.getElementById("TableA").insertRow(-1);
  // 如果插入成功
  if (row != null) {
    // 在这一行插入一个单元格
    var cell = row.insertCell();
    // 将此单元格的内容设置为用户名
    cell.innerHTML = userName;
    // 再插入一个单元格
    cell = row.insertCell();
    // 将此单元格的内容设置为用户密码
    cell.innerHTML = userPass;
    // 再插入一个单元格
    cell = row.insertCell();
    // 将此单元格的内容设置为空
    cell.innerHTML = "&nbsp;";
  }
  // 返回 false
  return false;
}

====更新分割线==== 题主更新了问题，因此我也再多说两句。

  1. if 判断的作用是，确认 “插入行” 的操作是否成功完成。因为如果插入不成功，那么后面的代码就不应该被执行，否则会引起错误。
  2. 怎么控制添加的顺序？就是按照你代码的执行顺序。第一次 insertCell 添加第一个单元格，第n次添加第n个。
  3. 为什么要 return false，因为这个函数应该被注册到了一个表单的提交事件里，return false 可以阻止表单被真正的提交。具体请学习 DOM 的 “事件” 相关知识点。 以上，请采纳，请给分。
推荐文章