CODEWITHSUNDEEP
javascriptjquery
user70192
user70192

Reputation: 14214

jquery - get html string of table cells

I have some HTML that is being generated by some server-side code. The HTML that's generated looks like this:

<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>

When a user makes a choice, I need to get the two cells next to it. For example, if someone chooses the third option, I'm trying to get the following:

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

In my attempt to do this, I have the following 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;
}

Unfortunately, my approach is not working. When I do the following:

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

I see the following in the console window:

[object HTMLTableCellElement][object HTMLTableCellElement]

Why? How do I get the actual HTML string?

Upvotes: 2

Views: 2621

Answers (6)

Belfordz
Belfordz

Reputation: 630

You could use jquery's siblings method:

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

The easiest way would be to use the .html() method on a dynamic tr which contains the other two td elements.

A trick is to clone them then wrap them in a tr and get the html of that

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>

In a function form it would be

function getHtml() {
  var item = $("#myChoices input[type='radio']:checked");
  var otherTD = item.closest('td').siblings().clone();

  return otherTD.wrapAll('<tr>').parent().html();
}

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 15112

JSFIDDLE DEMO

Use this instead

var cellHtml = cells[i].outerHTML;

Complete 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);

Result format:

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

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

Use outerHTML, instead you are storing the jQuery object in the variable.

var cellHtml = cells[i];

should be 

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

Upvotes: 1

cchambers
cchambers

Reputation: 76

I believe you could just use something simple like:

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

Example: http://codepen.io/cchambers/pen/ONNawo

Upvotes: 0

tom
tom

Reputation: 21

I propose you change the script a bit to simplify the process altogether.

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

Variable "string" will contain the text you are looking for.

Upvotes: 0

Related Questions