复制表行并替换表标记

时间:2013-03-13 03:54:43

标签: javascript

我是Java Script的新手,实际上只有C ++经验。我一直在寻找下面问题的答案,并且已经很短了。任何人都愿意给予的任何帮助都将非常感激。

我正在尝试编写一个JavaScript,只需单击一个按钮就可以复制一个表行并删除TR / TR标记并用P / P替换它,然后将其存储到一个变量中,我可以创建一个复制和粘贴友好的新格式,没有表格单元格或将该信息复制到剪贴板,我可以轻松地粘贴到单词。目前我已经能够克隆表行但无法解析标签之间的数据并删除表格式并添加段落格式。

谢谢。

这是一个小型演示程序,完成了我想要做的第一步。您会注意到,如果您选中这些部分的框并单击截断未选中的框将消失。我现在需要做的是将这些复选框中的文本(但只有文本,并且每个都成为一个段落)复制到剪贴板,或者将它们解析并以单词复制和粘贴友好格式打印。

脚本:

  var section0 = 6; //# of Basic Conditions
  function cloneTable() {
    for(var i = 0; i < section0; i++) //Basic Conditions
    {
      if(i == 0 || document.getElementById("check00-" + i).checked) {
        var row = document.getElementById('condition00-' + i); // find row to copy
        var table = document.getElementById("table2"); // find table to append to
        var clone = row.cloneNode(true); // copy children too
        clone.id = "newID"; // change id or other attributes/contents
        table.appendChild(clone); // add new row to end of table
      }
    }
    var elem = document.getElementById('table1')
    elem.parentNode.removeChild(elem);
  }

标记:

<table width=890 style='table-layout:fixed'>
  <col width=20>
    <col width=30>
      <col width=840>
        <tbody id="table1">
          <tr id="condition00-0">
            <td width=20 valign="top">
              <input type="checkbox" id="check00-0">
            </td>
            <td colspan="2" align="left"><font size="6" face="Arial"><a  name="Bookmark1">Header</a></font>
            </td>
          </tr>
          <tr id="condition00-1">
            <td valign="top">
              <input type="checkbox" id="check00-1" onclick="MainTitles('check00-0')">
            </td>
            <td valign="top"><font size="4" face="Arial">1.</font>
            </td>
            <td align="left" style="word-wrap: break-word"><font size="4" face="Arial">Text section1</font>
            </td>
          </tr>
          <tr id="condition00-2">
            <td valign="top">
              <input type="checkbox" id="check00-2" onclick="MainTitles('check00-0')">
            </td>
            <td valign="top"><font size="4" face="Arial">2.</font>
            </td>
            <td align="left" style="word-wrap: break-word"><font size="4" face="Arial">Text section 2</font>
            </td>
          </tr>
          <tr id="condition00-3">
            <td valign="top">
              <input type="checkbox" id="check00-3" onclick="MainTitles('check00-0')">
            </td>
            <td valign="top"><font size="4" face="Arial">3.</font>
            </td>
            <td align="left" style="word-wrap: break-word"><font size="4" face="Arial">Text section 3</font>
            </td>
          </tr>
          <tr id="condition00-4">
            <td valign="top">
              <input type="checkbox" id="check00-4" onclick="MainTitles('check00-0')">
            </td>
            <td valign="top"><font size="4" face="Arial">4.</font>
            </td>
            <td align="left" style="word-wrap: break-word"><font size="4" face="Arial">Text Section 4</font>
            </td>
          </tr>
          <tr id="condition00-5">
            <td valign="top">
              <input type="checkbox" id="check00-5" onclick="MainTitles('check00-0')">
            </td>
            <td valign="top"><font size="4" face="Arial">5.</font>
            </td>
            <td align="left" style="word-wrap: break-word"><font size="4" face="Arial">Text Section 5</font>
            </td>
          </tr>
        </tbody>
</table>
</div>
<table width=890 style='table-layout:fixed'>
  <col width=20>
    <col width=30>
      <col width=840>
        <tbody id="table2"></tbody>
</table>
<input type="button" onclick="cloneTable()" value="Truncate" />

JSFiddle: Test Link

1 个答案:

答案 0 :(得分:0)

您可以将行作为DOM元素访问,遍历每个单元格,然后解析innerHTML以获取您的值。

请参阅此帖子:How to dynamically calculate the total of each column in a table on an HTML page?

示例:

function strip(html) { // This is a very popular + useful technique.
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent||tmp.innerText;
}

var tbl = document.getElementById('my-table');
var rows = tbl.rows;
for (var i = 0; i < rows.length; i++) {
   var cells = rows[i].cells;
   for var j = 0; j < cells.length; j++) {
      alert(strip(cells[j].innerHTML));
   }
}