使用jQuery在表列中的所有单元格上运行函数

时间:2017-06-21 21:41:48

标签: javascript jquery html-table

我在下面定义了一个表格元素public partial class myForm : Form { private Dictionary<string, string> myDictionary = new Dictionary<string, string>(); //constructor. populates the items. Assumes there is a listbox (myListbox) and a textbox (myTextbox), named respectively public myForm() { InitializeComponent(); myDictionary.Add("key1", "item1"); myDictionary.Add("key2", "My Item"); myDictionary.Add("key3", "A Thing"); //populate the listbox with everything in the dictionary foreach (string s in myDictionary.Values) myListbox.Add(s); } //make sure to connect this to the textbox change event private void myTextBox_TextChanged(object sender, EventArgs e) { myListbox.BeginUpdate(); myListbox.Items.Clear(); foreach (string s in myDictionary.Values) { if (s.Contains(myListbox.Text)) myListbox.Items.Add(s); } myListbox.EndUpdate(); } } 。我试图在每个单元格上运行一个函数,该特定列由特定的表标题 - $table定义。我找到了该表标题的索引(qc_statusTh),并且能够获取该列中的下一个表格单元格 - qc_statusColumnIndex

但是,我无法遍历表格单元格并在该列中的每个表格单元格上运行一个函数。

这是我到目前为止的JavaScript代码:

qc_statusCell

如何编辑此代码以遍历表格中与$(document).ready(function() { var $table = $("table.tables.list"); if ($table.length > 0) { var qc_statusTh = $("th.headersub:contains('qc_status')"); var qc_statusColumnIndex = $(qc_statusTh).index(); var qc_statusCell = $($table).find("td").eq(qc_statusColumnIndex); // this does not work. this only replaces the first cell // in the row after qc_statusTh with "TESTING" $(qc_statusCell).each(function() { $(this).replaceWith("TESTING"); }); } }); 具有相同索引的每个单元格?

1 个答案:

答案 0 :(得分:1)

如果你考虑一下,你真的想要在表的行而不是单元格上迭代(使用each)。如果您这样做,则可以从每行中获取第n个 td元素并应用转换。

$(document).ready(function() {
  var $table = $("table.tables.list");

  if ($table.length > 0) {
    var qc_statusTh = $("th.headersub:contains('qc_status')");
    var qc_statusColumnIndex = $(qc_statusTh).index();
    
    var qc_rows = $($table).find('tr');

    $(qc_rows).each(function() {
      $(this).find('td').eq(qc_statusColumnIndex).replaceWith("TESTING");
    });

  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tables list">
  <thead>
    <th class="headersub">qc_example</th>
    <th class="headersub">qc_status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ok</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ok</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Error</td>
    </tr>
  </tbody>
</table>