Question

我有一些由某些服务器端代码生成的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字符串？

Answer 1

使用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 Fiddle

Answer 2

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>

Answer 3

我建议您稍微更改脚本以完全简化过程。

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

变量＆＃34;字符串＆＃34;将包含您要查找的文本。

Answer 4

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

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

Answer 5

我相信你可以使用简单的东西：

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

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

Answer 6

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

一个技巧是克隆它们然后将它们包装在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 - 获取表格单元格的html字符串

6 个答案: