J'essaye de placer une condition dans le Javascript "Si une table <td> existe alors montrer ses comptes de cellules, sinon alerte (" Aucun TD n'existe ")". Ma table est comme ça

<table id="tableid" class="cf7-db-table">
  <thead>
    <tr>
      <th title="Submitted">
        <div id="PC form,Submitted">Submitted</div>
      </th>
      <th title="cmName">
        <div id="PC form,cmName">cmName</div>
      </th>
      <th title="cCNumber">
        <div id="PC form,cCnicNumber">cCNumber</div>
      </th>
      <th title="cMEmail">
        <div id="PC form,cMEmail">cMEmail</div>
      </th>
      <th title="cAcNumber">
        <div id="PC form,cAcNumber">cAcNumber</div>
      </th>
      <th title="refNumber">
        <div id="PC form,refNumber">refNumber</div>
      </th>
      <th title="pDate">
        <div id="PC form,prcDate">pDate</div>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
1
WeDevelop 7 avril 2020 à 02:16

3 réponses

Meilleure réponse

En utilisant querySelectorAll, vous pouvez accéder au DOM et vérifier les éléments td à l'intérieur du tableau.

L'exemple ci-dessous montre un cas comme celui que vous avez fourni qui ne contient aucun élément td et un autre qui contient:

const logTd = (isTd) => {
  if (isTd) {
    console.log('td found in table', isTd.length)
  } else {
    console.log('no td in the table')
  }
}

let isTd = document.querySelectorAll('#tableid td')
logTd(isTd)

isTd = document.querySelectorAll('#table-withtd td')
logTd(isTd)
Table without td
<table id="tableid" class="cf7-db-table">
  <thead>
    <tr>
      <th title="Submitted">
        <div id="PC form,Submitted">Submitted</div>
      </th>
      <th title="cmName">
        <div id="PC form,cmName">cmName</div>
      </th>
      <th title="cCNumber">
        <div id="PC form,cCnicNumber">cCNumber</div>
      </th>
      <th title="cMEmail">
        <div id="PC form,cMEmail">cMEmail</div>
      </th>
      <th title="cAcNumber">
        <div id="PC form,cAcNumber">cAcNumber</div>
      </th>
      <th title="refNumber">
        <div id="PC form,refNumber">refNumber</div>
      </th>
      <th title="pDate">
        <div id="PC form,prcDate">pDate</div>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
Table with td
<table id="table-withtd" class="cf7-db-table">
  <thead>
    <tr>
      <th title="Submitted">
        <div id="PC form,Submitted">Submitted</div>
      </th>
      <th title="cmName">
        <div id="PC form,cmName">cmName</div>
      </th>
      <th title="cCNumber">
        <div id="PC form,cCnicNumber">cCNumber</div>
      </th>
      <th title="cMEmail">
        <div id="PC form,cMEmail">cMEmail</div>
      </th>
      <th title="cAcNumber">
        <div id="PC form,cAcNumber">cAcNumber</div>
      </th>
      <th title="refNumber">
        <div id="PC form,refNumber">refNumber</div>
      </th>
      <th title="pDate">
        <div id="PC form,prcDate">pDate</div>
      </th>
    </tr>
    <tr>
        <td>31</td>
        <td>31</td>
        <td>31</td>
        <td>31</td>
        <td>31</td>
        <td>31</td>
        <td>31</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
0
a--m 6 avril 2020 à 23:41

Vérifiez le code suivant.

$(function() {
  function countCells(tObj) {
    return $("td", tObj).length > 0 ? $("td", tObj).length : false;
  }

  function addRow(tObj) {
    $("<tr>").appendTo($("tbody", tObj));
    $("th", tObj).each(function() {
      $("<td>").html("&nbsp;").appendTo($("tbody tr:last", tObj));
    });
    checkTable(tObj);
  }

  function checkTable(tObj) {
    var count = countCells(tObj);
    if (count) {
      alert("There are " + count + " table cells.");
    } else {
      alert("No Cells Found.");
    }
  }

  checkTable($("#tableid"));

  $("button").click(function() {
    addRow($("#tableid"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableid" class="cf7-db-table">
  <thead>
    <tr>
      <th title="Submitted">
        <div id="PC form,Submitted">Submitted</div>
      </th>
      <th title="cmName">
        <div id="PC form,cmName">cmName</div>
      </th>
      <th title="cCNumber">
        <div id="PC form,cCnicNumber">cCNumber</div>
      </th>
      <th title="cMEmail">
        <div id="PC form,cMEmail">cMEmail</div>
      </th>
      <th title="cAcNumber">
        <div id="PC form,cAcNumber">cAcNumber</div>
      </th>
      <th title="refNumber">
        <div id="PC form,refNumber">refNumber</div>
      </th>
      <th title="pDate">
        <div id="PC form,prcDate">pDate</div>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<button>Add Row</button>

En utilisant un bon sélecteur, vous pouvez ensuite appeler length sur l'objet jQuery pour obtenir un décompte des éléments sélectionnés.

Vous pouvez également faire quelque chose comme:

$(function() {
  $.fn.countCells = function() {
    return $("td", this).length;
  }

  console.log($("#tableid").countCells());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableid" class="cf7-db-table">
  <thead>
    <tr>
      <th title="Submitted">
        <div id="PC form,Submitted">Submitted</div>
      </th>
      <th title="cmName">
        <div id="PC form,cmName">cmName</div>
      </th>
      <th title="cCNumber">
        <div id="PC form,cCnicNumber">cCNumber</div>
      </th>
      <th title="cMEmail">
        <div id="PC form,cMEmail">cMEmail</div>
      </th>
      <th title="cAcNumber">
        <div id="PC form,cAcNumber">cAcNumber</div>
      </th>
      <th title="refNumber">
        <div id="PC form,refNumber">refNumber</div>
      </th>
      <th title="pDate">
        <div id="PC form,prcDate">pDate</div>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
0
Twisty 6 avril 2020 à 23:44

Je vérifierais si la table est vide:

console.log($('#tableid').children('tbody').children().length > 0);

Mais aussi, codez pour votre tâche:

if($('#tableid').find('td').length > 0){
	console.log('table exist');
}else{
	console.log('table not exist');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableid" class="cf7-db-table">
	<thead>
		<tr>
			<th title="Submitted">
				<div id="PC form,Submitted">Submitted</div>
			</th>
			<th title="cmName">
				<div id="PC form,cmName">cmName</div>
			</th>
			<th title="cCNumber">
				<div id="PC form,cCnicNumber">cCNumber</div>
			</th>
			<th title="cMEmail">
				<div id="PC form,cMEmail">cMEmail</div>
			</th>
			<th title="cAcNumber">
				<div id="PC form,cAcNumber">cAcNumber</div>
			</th>
			<th title="refNumber">
				<div id="PC form,refNumber">refNumber</div>
			</th>
			<th title="pDate">
				<div id="PC form,prcDate">pDate</div>
			</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
0
Vadim 6 avril 2020 à 23:48