jquery - 獲取表格單元格的html字符串

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小提琴

Answer 2

JSFIDDLE 演示

改用這個

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();
});

變量“字符串”將包含您要查找的文本。

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

最簡單的方法是在包含其他兩個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();
}