获取表格单元格的 HTML 字符串

get html string of table cells

本文关键字：HTML 字符串 单元格 表格 获取      更新时间：2023-09-26

我有一些由一些服务器端代码生成的HTML。生成的 HTML 如下所示：

<table id="myChoices">
  <tr>
    <td><input type="radio" name="choice" value="1" /></td>
    <td>Monday</td>
    <td>Mar 7</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="2" /></td>
    <td>Tuesday</td>
    <td>Mar 8</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="3" /></td>
    <td>Wednesday</td>
    <td>Mar 9</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="4" /></td>
    <td>Thursday</td>
    <td>Mar 10</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="5" /></td>
    <td>Friday</td>
    <td>Mar 11</td>
  </tr>
</table>

当用户做出选择时，我需要获取它旁边的两个单元格。例如，如果有人选择第三个选项，我正在尝试获得以下内容：

<td>Wednesday</td><td>Mar 9</td>

在我尝试这样做时，我有以下jQuery：

function getHtml() {
  var html = '';
  var item = $("#myChoices input[type='radio']:checked");
  if (item.length > 0) {
    var grandparent = item.parent().parent();
    var cells = grandparent.children();
    var html = '';
    for (var i = 0; i < cells.length; i++) {
      if (i > 0) {
        var cellHtml = cells[i];
        html += cellHtml;
      }
    }
  }
  return html;
}

不幸的是，我的方法不起作用。当我执行以下操作时：

var test = getHtml();
console.log(test);

我在控制台窗口中看到以下内容：

[object HTMLTableCellElement][object HTMLTableCellElement]

为什么？如何获取实际的 HTML 字符串？

使用 outerHTML ，而是将 jQuery 对象存储在变量中。

var cellHtml = cells[i];

应该是 

var cellHtml = cells[i].outerHTML;

.JS

function getHtml() {
  var item = $("#myChoices input[type='radio']:checked");
  if (item.length > 0) {
    var grandparent = item.closest('tr'),
          cells = grandparent.children();
    var html = '';
    for (var i = 1; i < cells.length; i++) {
        html += cells[i].outerHTML + ' ';
    }
  }
  return html;
}

js 小提琴

我建议你稍微改变一下脚本，以完全简化这个过程。

$("#myChoices input").change( function() {
     var string = $(this).parent().nextAll("td").text();
});

变量"字符串"将包含您要查找的文本。

我相信

你可以使用一些简单的东西，比如：

$("input[type='radio']:checked").parents("tr").first().text();

示例：http://codepen.io/cchambers/pen/ONNawo

JSFIDDLE DEMO

改用这个 

var cellHtml = cells[i].outerHTML;

完整的 JS

  var html = '';
  var item = $("#myChoices input[type='radio']:checked");
  if (item.length > 0) {
    var grandparent = item.parent().parent();
    var cells = grandparent.children();
    var html = '';
    for (var i = 0; i < cells.length; i++) {
      if (i > 0) {
        var cellHtml = cells[i].outerHTML; //change here
        html += cellHtml;
      }
    }
  }
  console.log(html);

结果格式：

<td>Monday</td><td>Mar 7</td>

最简单的方法是在包含其他两个td元素的动态tr上使用 .html() 方法。

一个技巧是克隆它们，然后将它们包装在tr中并获取其html

var others = $(this).closest('td').siblings().clone();
alert( others.wrapAll('<tr>').parent().html());


$(function(){
    $('#myChoices [name="choice"]').on('change', function(){
       var others = $(this).closest('td').siblings().clone();
      alert( others.wrapAll('<tr>').parent().html());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myChoices">
  <tr>
    <td><input type="radio" name="choice" value="1" /></td>
    <td>Monday</td>
    <td>Mar 7</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="2" /></td>
    <td>Tuesday</td>
    <td>Mar 8</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="3" /></td>
    <td>Wednesday</td>
    <td>Mar 9</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="4" /></td>
    <td>Thursday</td>
    <td>Mar 10</td>
  </tr>
  <tr>
    <td><input type="radio" name="choice" value="5" /></td>
    <td>Friday</td>
    <td>Mar 11</td>
  </tr>
</table>

在函数形式中，它将是

function getHtml() {
  var item = $("#myChoices input[type='radio']:checked");
  var otherTD = item.closest('td').siblings().clone();
  return otherTD.wrapAll('<tr>').parent().html();
}

你可以使用 jquery 的兄弟姐妹方法：

 var textContents = $("#myChoices input[type='radio']:checked").siblings().html();
相关文章：