как найти, если тд таблицы существуют?

Question

Я пытаюсь установить условие в javascript "Если таблица <td> существует, то показать количество ее ячеек, иначе предупреждение (" TD не существует ")". Мой стол такой

1003 *

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

Answer 1

Просмотрите следующий код.

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

Используя хороший селектор, вы можете затем вызвать length для объекта jQuery, чтобы получить количество выбранных элементов.

Вы также можете сделать что-то вроде:

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

Answer 2

Я бы проверил, пуста ли таблица:

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

Но также, код вашей задачи:

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>

Answer 3

Используя querySelectorAll, вы можете получить доступ к DOM и проверить наличие элементов td внутри таблицы.

В приведенном ниже примере показан случай, подобный предоставленному вами, который не содержит элементов td, а другой что делает:

const tableHasTd = selector => {
  /*
   * The querySelectorAll is used to get the elements 
   * in the provided selector. Only length is used to
   * check is any is found.
   */ 
  const { length } = document.querySelectorAll(selector)
  console.log(`Found ${length} td elements in the table`)
  return Boolean(length > 0)
}

tableHasTd('#tableid td')
const isTD = tableHasTd('#table-withtd td')

// the return value of the funciton can be used as condition
if (isTD) {
  console.log('This table has td')
}

tableHasTd('#no-table td')

<h2>Table without td</h2>
<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>
<h2>Table with td</h2>
<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>