javascript - create - siblings in jquery w3schools




أضف صف الجدول في jQuery (20)

أعتقد أنني فعلت في مشروعي ، هنا هو:

أتش تي أم أل

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

شبيبة

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

ما أفضل طريقة في jQuery لإضافة صف إضافي إلى جدول كصف آخر؟

هل هذا مقبول؟

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

هل هناك قيود على ما يمكنك إضافته إلى جدول مثل هذا (مثل المدخلات ، والتحديدات ، وعدد الصفوف)؟


أعلم أنك طلبت طريقة jQuery. نظرت كثيرًا ووجدت أنه يمكننا القيام بذلك بطريقة أفضل من استخدام جافا سكريبت مباشرة عن طريق الوظيفة التالية.

tableObject.insertRow(index)

index هو عدد صحيح يحدد موضع الصف المراد إدراجه (يبدأ عند 0). يمكن أيضًا استخدام قيمة -1؛ مما يؤدي إلى إدراج الصف الجديد في الموضع الأخير.

هذه المعلمة مطلوبة في Firefox و Opera ، ولكنها اختيارية في Internet Explorer و Chrome و Safari .

إذا تم حذف هذه المعلمة ، تقوم insertRow() بإدراج صف جديد في الموضع الأخير في Internet Explorer وفي الموضع الأول في Chrome و Safari.

ستعمل مع كل بنية مقبولة من جدول HTML.

سوف يقوم المثال التالي بإدراج صف في آخر (يتم استخدام -1 كفهرس):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

اتمني ان يكون مفيدا.


أنا حلها بهذه الطريقة التي أعتقد أنها هي الأكثر قراءة :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

إذا كان لديك متغير آخر يمكنك الوصول إليه في <td> مثل هذه المحاولة.

بهذه الطريقة آمل أن يكون من المفيد

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

انصح

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

في مقابل

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

تعمل الكلمات الرئيسية الأولى والأخيرة على العلامة الأولى أو الأخيرة للبدء ، وليست مغلقة. لذلك ، هذا يلعب أجمل مع الجداول المتداخلة ، إذا كنت لا ترغب في تغيير الجدول المتداخل ، ولكن بدلاً من ذلك أضف إلى الجدول الإجمالي. على الأقل ، هذا ما وجدته.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

بطريقة بسيطة:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

في رأيي الطريقة الأسرع والواضحة هي

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

هنا هو عرض Fiddle

أيضا يمكنني أن أوصي وظيفة صغيرة لإجراء المزيد من التغييرات أتش تي أم أل

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

إذا كنت تستخدم المؤلف سلسلة بلدي يمكنك القيام بذلك مثل

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

هنا هو عرض Fiddle


كما أنني حصلت على طريقة أيضا إضافة صف في الماضي أو أي مكان محدد لذلك أعتقد أنني يجب أن أشارك أيضا هذا:

أولا معرفة الطول أو الصفوف:

var r=$("#content_table").length;

ثم استخدم الرمز أدناه لإضافة صفك:

$("#table_id").eq(r-1).after(row_html);

لإضافة مثال جيد على الموضوع ، هنا هو حل يعمل إذا كنت بحاجة إلى إضافة صف في موقف محدد.

تتم إضافة الصف الإضافي بعد الصف الخامس ، أو في نهاية الجدول إذا كان هناك أقل من 5 صفوف.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

أضع المحتوى على حاوية جاهزة (مخفية) أسفل الجدول .. لذلك إذا كان (أو المصمم) مضطرًا لتغييره ، لا يلزم تحرير JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

لا يضمن لك الأسلوب الذي تقترحه منحك النتيجة التي تبحث عنها - ماذا لو كان لديك tbody على سبيل المثال:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

سوف ينتهي مع ما يلي:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

لذلك أوصي بهذا النهج بدلاً من ذلك:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

يمكنك تضمين أي شيء في الأسلوب after() طالما كان HTML صالحًا ، بما في ذلك صفوف متعددة وفقًا للمثال أعلاه.

تحديث: إعادة النظر في هذه الإجابة بعد النشاط الأخير مع هذا السؤال. يجعل عدم الجفن تعليقًا جيدًا بأنه سيكون هناك دائمًا tbody في DOM ؛ هذا صحيح ، ولكن فقط إذا كان هناك صف واحد على الأقل. إذا لم يكن لديك صفوف ، فلن يكون هناك tbody ما لم تحددها بنفسك.

suggests tbody بدلاً من إضافة محتوى بعد آخر tr . هذا يدور حول مسألة عدم وجود صفوف ، ولكن لا يزال غير مضاد للرصاص لأنه يمكنك نظريًا وجود عدة عناصر tbody إضافة الصف إلى كل منها.

وزد كل شيء ، لست متأكداً من وجود حل واحد من سطر واحد يمثل كل سيناريو ممكن. ستحتاج إلى التأكد من أن شفرة jQuery تتطابق مع الترميز.

أعتقد أن الحل الأكثر أمانًا هو على الأرجح ضمان أن table الخاص بك يتضمن دائمًا tbody واحدًا على الأقل في tbody ، حتى لو لم يكن له صفوف. على هذا الأساس ، يمكنك استخدام ما يلي والذي سيعمل مع العديد من الصفوف التي لديك (وأيضاً تعدد عناصر tbody ):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

لقد وجدت هذا البرنامج المساعد AddRow مفيدة للغاية لإدارة صفوف الجدول. على الرغم من أن solution لوقا سيكون الأفضل إذا كنت بحاجة إلى إضافة صف جديد.


للحصول على أفضل حل يتم نشره هنا ، إذا كان هناك جدول متداخل في الصف الأخير ، فسيتم إضافة الصف الجديد إلى الجدول المتداخل بدلاً من الجدول الرئيسي. حل سريع (مع الأخذ في الاعتبار الجداول التي تحتوي على / بدون تويد والجداول مع الجداول المتداخلة):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

مثال على الاستخدام:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

هذا هو الحل الخاص بي

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

هنا بعض كود الإختراق hacketi. أردت الحفاظ على قالب صف في صفحة HTML . يتم عرض صفوف الجدول 0 ... n في وقت الطلب ، ويكون لهذا المثال صفًا مقسّمًا و صف قالب مبسطًا. يكون جدول القالب مخفيًا ، ويجب أن تكون علامة الصف ضمن جدول صالح أو قد تسقطه المستعرضات من شجرة DOM . إضافة صف يستخدم عداد + 1 معرف ، ويتم الحفاظ على القيمة الحالية في سمة البيانات. يضمن أن يحصل كل صف على معلمات URL فريدة.

لقد أجريت اختبارات على Internet Explorer 8 ، و Internet Explorer 9 ، و Firefox ، و Chrome ، و Opera ، و Nokia Lumia 800 ، و Nokia C7 (مع Symbian 3) ، و Android stock ، ومتصفحات Firefox التجريبية.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

ملاحظة: أعطي جميع الاعتمادات لفريق jQuery. إنهم يستحقون كل شيء. برمجة جافا سكريبت بدون jQuery - لا أريد حتى التفكير في هذا الكابوس.


يمكن القيام بذلك بسهولة باستخدام "last ()" وظيفة jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

يمكنك استخدام وظيفة الصف الجدول إضافة jQuery كبيرة. إنه يعمل بشكل رائع مع الجداول التي تحتوي على <tbody> والتي لا تعمل. كما أنه يأخذ بعين الاعتبار colspan من صف الجدول الأخير.

هنا مثال على الاستخدام:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

إجابة نيل هي الأفضل. ومع ذلك ، تتعطل الأمور بسرعة كبيرة. سيكون اقتراحي لاستخدام المتغيرات لتخزين العناصر وإلحاقها إلى التسلسل الهرمي DOM.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

جافا سكريبت

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

الكتابة باستخدام وظيفة javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

يمكنك تخزين متغير الذيل مؤقتًا وتقليل الوصول إلى DOM (ملاحظة: قد يكون من الأفضل استخدام صفًا زائفًا بدلاً من التذييل).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")




html-table