javascript - jQuery 将 td onclick 值传递给其他表

Question

我尝试寻找此问题的解决方案，但找不到合适的文章

    <div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
    <table cellspacing='0' id='header' class="ui-widget">
        <tr>
            <th>Invoice Number</th>
             <th>Invoice Total</th>
        </tr>     
        <tr>
            <td><a href="#"  >INV-Error_Test1</a></td>
            <td>22.000000 USD</td>
        </tr>
        <tr>
            td><a href="#"  >INV-Error_Test2</a></td>
           <td>22.000000 USD</td>
        </tr>
    </table> 
</div>
<div class='panel ui-widget-content' id="invoiceErrors">
<h2>Select a Invoice from the left to view Error Details</h2>
  <div class='panel ui-widget-content' id="invoiceHeaders">
    <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Headers</span></h2>
        <table class="ui-widget">
           <tr>
                <th>Invoice Number</th>
                 <th>Matter Number</th>
                <th>Invoice Total</th>
                <th>Invoice Tax Total</th>
                <th>Invoice Net Total</th>
          </tr>

        <tr>
            <td><%= invoiceNumber%></td>
            <td>CC_MAT_1221</td>
            <td>22.000000 USD</td>
            <td>22.000000 USD</td>
            <td>22.000000 USD</td>
        </tr>

        <td class = 'error'>File Error : The file does not contain any record delimiters or is in an unsupported format</td>

       </table> 
    </div>
    <div class='panel ui-widget-content' id="invoiceLines">
    <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Line Items</span></h2>
     <table class="ui-widget">
        <tr>
            <th>Line Item Number</th>
            <th>Line Item Date</th>
            <th>Unit Cost</th>
            <th>Number of Units</th>
            <th>Line Item Total</th>
            <th>Task Code</th>
            <th>Expense Code</th>
            <th>Timekeeper ID</th>
            <th>Line Item Description</th>
        </tr>
        <tr>
            <td>2</td>
            <td>20150304</td>
            <td>2</td>
            <td>2</td>
            <td>6</td>
            <td></td>
            <td>E2</td>
            <td></td>
            <td></td>
        </tr>
        <td class='error'><%= invoiceNumber%> Line : 2 Invoice does not foot Reported = (22.0)Calculated (18.0)</td>
        <tr>
            <td>3</td>
            <td>20150306</td>
            <td>3</td>
            <td>3</td>
            <td>12</td>
            <td>T3</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </div>
 </div>

这是 jsfiddle 链接 http://jsfiddle.net/5n62md3m/

我能够从 invoiceList div 获取发票号码，如下所示

 $("#invoiceList a").click(function (e) {
console.log('invoice --->'+$(this).text());
}); 

但我不确定如何将其发送到 invoiceErrors div

中的 invoiceNumber

有人可以帮我吗？

Answer 1

更新答案

更好的是，感谢其中一条评论，给单元格一个 ID，例如“#invoice-number-error”，然后直接使用 jQuery 定位该 ID，无需 .find()，使一切变得更快。

又名:

$("#invoiceList").find('a').click(function (e) {
    var invoiceNumber = $(this).text();
    $('#invoice-number-error').text(invoiceNumber);
});

旧答案

我建议为表格单元格提供类，我更新了您的字段以反射(reflect)一个更改:

我将“发票编号”类添加到#invoiceErrors 下的该单元格中。然后我更新了你的函数，如下所示:

$("#invoiceList").find('a').click(function (e) {
    var invoiceNumber = $(this).text();
    $('#invoiceErrors').find('.invoice-number').text(invoiceNumber);
});