Question 10795 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery find TD with a TR Id

I need to identify and modify the data of a tr but only the td.
I tried to find them via the follwing jquery:

$("tr[id='#"+selecteditem+"']").children(":eq(0)").text();

But the result is always empty.

I also tried the other method mentioned here in stackoverflow:

var td = $(".dname").find("td:eq(1)").val();

or also:

$("tr[id='#"+selecteditem+"'] td:nth-child(1)").text();

but the result is always the same:

""

get someone give me a clue what I do wrong here?

Update as needed:

var selecteditem;
$(function() {
  if ($('#Name').val() == "Default Policy") {
    $('#General :input').prop("disabled", true);
    $('#Priority').val("100");
    $('#ApplyTo :input').prop("disabled", true);
  }
  $('td').click(function() {
    if ($(this).parent().siblings().hasClass('activetable')) {
      $(this).parent().siblings().removeClass('activetable');
    }
    $(this).parent().toggleClass('activetable');
    if (($(this).parent().hasClass('activetable')) || ($(this).parent().siblings().hasClass('activetable'))) {
      $('#btn-editpolicy').prop('disabled', false);
      $('#btn-rmpolicy').prop('disabled', false);
    } else {
      $('#btn-editpolicy').prop('disabled', true);
      $('#btn-rmpolicy').prop('disabled', true);
    }
    selecteditem = $(this).closest('tr').attr('id');
  })
});
var tdclick = function(selobj) {
  if ($(selobj).parent().siblings().hasClass('activetable')) {
    $(selobj).parent().siblings().removeClass('activetable');
  }
  $(selobj).parent().toggleClass('activetable');
  if (($(this).parent().hasClass('activetable')) || ($(this).parent().siblings().hasClass('activetable'))) {
    $('#btn-editpolicy').prop('disabled', false);
    $('#btn-rmpolicy').prop('disabled', false);
  } else {
    $('#btn-editpolicy').prop('disabled', true);
    $('#btn-rmpolicy').prop('disabled', true);
  }
  selecteditem = $(selobj).closest('tr').attr('id');
};
var editselpolicy = function() {
  let splitteditem = selecteditem.split("-");
  let prefix = splitteditem[1].split(":")[0];
  let localselect = splitteditem[1].split(":")[1].split("@")[0];
  let domainselect = splitteditem[1].split(":")[1].split("@")[1];
  $('#EditSimpleSelectprefix').val(prefix);
  $('#EditSimpleSelect option[value="' + localselect + '"]').attr("selected", "selected");
  $('#Editsimpleselectdomain').val(domainselect).change();
  $('#EditAdvancedSelectprefix').val(prefix);
  $('#EditAdvancedSelectlocal').val(localselect);
  $('#EditAdvancedSelectdomain').val(domainselect).change();
  Editupdateresult();
};
var saveeditpolicy = function() {
  console.log($("tr[id='#" + selecteditem + "']").children("eq(1)").text());
};
var Editupdateresult = function() {
  if ($('#EditSimpletab-btn').hasClass('active')) {
    let prefix = $('#EditSimpleSelectprefix').val();
    let Select = $('#EditSimpleSelect').val();
    let selectdomain = $('#Editsimpleselectdomain').val();
    $('#Edittemplateresult').val(prefix + ':' + Select + '@' + selectdomain);
  } else if ($('#EditAdvancedtab-btn').hasClass('active')) {
    let prefix = $('#EditAdvancedSelectprefix').val();
    let Select = $('#EditAdvancedSelectlocal').val();
    let selectdomain = $('#EditAdvancedSelectdomain').val();
    $('#Edittemplateresult').val(prefix + ':' + Select + '@' + selectdomain);
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" >
    src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" >
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
  .tooltip.show * {
    text-align: left;
  }
  
  .activetable {
    background: lightblue;
    font-weight: bold;
  }
</style>
table id="templatetable" class="table table-hover">
<div id="AddressPolicies" class="card">
  <div class="card-body"> <button type="button" id="btn-newpolicy" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#AddPolicy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>    <button type="button" id="btn-rmpolicy" class="btn btn-sm btn-danger" onclick="rmselpolicy();"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>    <button type="button" id="btn-editpolicy" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#EditPolicy" onclick="editselpolicy();"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></button>
    <div class="overflow-auto" style="max-height: 250px;">
      <table id="templatetable" class="table table-hover">
        <thead>
          <tr class="d-flex">
            <th scope="col" class="col-sm-3">Type</th>
            <th scope="col" class="col-sm-9">Template</th>
          </tr>
        </thead>
        <tbody class="table-group-divider">
          <tr id="tr-smtp:externernal_%g.%[email protected]" class="d-flex activetable">
            <td class="col-sm-3">smtp</td>
            <td class="col-sm-9">external_%g.%[email protected]</td>
          </tr>
          <input type="hidden" id="hidden-smtp:externernal_%g.%[email protected]" name="smtp:externeral_%g.%[email protected]" value="smtp:externernal_%g.%[email protected]">
          <tr id="tr-smtp:Externernal_%g.%[email protected]" class="d-flex">
            <td class="col-sm-3">smtp</td>
            <td class="col-sm-9">Externeral_%g.%[email protected]</td>
          </tr>
          <input type="hidden" id="hidden-smtp:Externernal_%g.%[email protected]" name="smtp:Externernal_%g.%[email protected]" value="smtp:Externeral_%g.%[email protected]">
          <tr id="tr-SMTP:Externeral_%g.%[email protected]" class="d-flex">
            <td class="col-sm-3">SMTP</td>
            <td class="col-sm-9">Externeral_%g.%[email protected]</td>
          </tr>
          <input type="hidden" id="hidden-SMTP:Externernal_%g.%[email protected]" name="SMTP:Externernal_%g.%[email protected]" value="SMTP:Externernal_%g.%[email protected]">
          <tr id="tr-smtp:Externeral%g.%[email protected]" class="d-flex">
            <td class="col-sm-3">smtp</td>
            <td class="col-sm-9">Externeral_%g.%[email protected]</td>
          </tr>
          <input type="hidden" id="hidden-smtp:Externernal_%g.%[email protected]" name="smtp:Externernal_%g.%s@testcloud" value="smtp:Externernal_%g.%[email protected]"> </tbody>
      </table>
    </div>
  </div>
</div>
<div class="modal fade" id="EditPolicy" tabindex="-1" aria-labelledby="EditPolicy" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Addresspolicy</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Edit the selected Addresspolicy, with the following buttons you can decide either you want to edit the policy via a simple or a complex way.</p>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <button type="button" class="nav-link active" id="EditSimpletab-btn" data-bs-toggle="tab" role="tab" data-bs-target="#EditSimpletab" aria-controls="EditSimpletab" aria-selected="true" onclick="Editchangecomplex();">Simple Policy functions</button>
          <button type="button" class="nav-link" id="EditAdvancedtab-btn" data-bs-toggle="tab" role="tab" data-bs-target="#EditAdvancedtab" aria-controls="EditAdvancedtab" aria-selected="false" onclick="Editchangecomplex();">Advanced Policy functions</button>
        </div>
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" role="tabpanel" id="EditSimpletab" tabindex="0" aria-labelledby="EditSimpletab-btn" aria-hidden="true">
            <div class="input-group">
              <label class="col-sm-2 col-form-label">New template</label>
              <input class="form-control" type="text" name="EditSimpleSelectprefix" id="EditSimpleSelectprefix" onkeyup="Editupdateresult();"></input>
              <select class="form-control" id="EditSimpleSelect" onchange="Editupdateresult();">
                <option value="%s.%g">Givenname.Surname</option>
                <option value="%s">Surname</option>
                <option value="%1s.%g">G.Surname</option>
                <option value="%1s.%1g">G.S</option>
                <option value="%m">Alias</option>
              </select>
              <span class="input-group-text">@</span>
              <select class="form-control" id="Editsimpleselectdomain" onchange="Editupdateresult();">
                <!-- {Template_Domains} -->
              </select>
            </div>
            <br />
          </div>
          <div class="tab-pane fade" role="tabpanel" id="EditAdvancedtab" tabindex="0" aria-labelledby="EditAdvancedtab-btn" aria-hidden="true">
            <div class="input-group">
              <label class="col-sm-2 col-form-label">New template</label>
              <input class="form-control" type="text" name="EditAdvancedSelectprefix" id="EditAdvancedSelectprefix" placeholder="SMTP, smtp, SIP, sip etc..." onkeyup="Editupdateresult();"></input>
              <input type="text" class="form-control" id="EditAdvancedSelectlocal" onkeyup="Editupdateresult();">
              <span class="input-group-text">@</span>
              <select class="form-control" id="EditAdvancedSelectdomain" onchange="Editupdateresult();">
                <!-- {Template_Domains} -->
              </select>
            </div>
            <br />
          </div>
        </div>
        <div class="input-group">
          <label class="col-sm-2 col-form-label" for="Edittemplateresult">Result: </label>
          <input type="text" readonly class="form-control-plaintext" id="Edittemplateresult" value=""></input>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="saveeditpolicy();">Save changes to policy</button>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it with this code snippet:

    $("tr[id='"+selecteditem+"']").children(":eq(0)").text();

    I was on the right track but missed that I dont need the #.

    Thank you guys!!


  2. 0

    You don’t need the # if you are querying by attr:

    var selectedItem = "example";

console.log($("tr[id='#" + selectedItem + "'] td:nth-child(1)").text()); // original
console.log($("tr[id='" + selectedItem + "'] td:nth-child(1)").text()); // no #
console.log($(`tr#${selectedItem} td:nth-child(1)`).text()); // cleaner
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr id="example">
      <td>TD 1</td>
    </tr>
    <tr>
      <td>TD 2</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search